How to build a slider content structure?

In this short article, we will cover how you can use the component approach offered to you by Storyblok to create a simple slider content component and how to load it. After this article, you will have the API requests in hand to build out your own slider component with the technology you like and content provided by Storyblok.

Our Goal

At the end of this tutorial, you should be able to create a nested component structure. We want to create a slider component with a slides property which contains multiple slide components. The slide component should allow us to upload an image and enter an alt text.

Let's start fresh

You can add that component structure to existing spaces, to keep this tutorial simple we will start with a fresh space. Our first step will be to click "Create new space" in the sidebar after we are logged into app.storyblok.com.

Getting Started

You should now see a popup with the message "Click here to get started". We will click on the Home entry since we're going to extend the default components added as an example during startup for us with our own slider component.

A Content Entry

After the click on the home entry, we will enter the edit mode for one content entry. By default, the content entry has the visual edit-mode activated, since we did not configure it we will see an explanation on how to integrate Storyblok in different technologies.

Compose Mode

Since we want to create and add new components to the default content structure provided, we will now click on the Compose menu item next to edit in the top navbar. After entering the Compose mode you will see that the sidebar on the left will disappear and the content sidebar on the right will appear. You will also see two components that have been added to showcase the main idea. Those components are also covered in the demo code you can see the different technologies.

Adding the Slider Component

To create a new component in Storyblok you can use the Components Menu in the main sidebar or directly in one content entry. We will use the second approach. To do so we will click the Add Block button below the demo components.

After that, you should be in the Add Block sidebar which allows you to add existing components and also create a new one. To do so all we have to do is to enter our name in the search since the component does not exist you will be able to hit "create new component". We will name our component slider.

Congrats! You've now already created a new component. Next step will be to define the schema (properties) of that component. Since our Slider should be able to have multiple Slide components we will use the Blocks field type for it. The Blocks field type allows you to add more blocks inside one component or content type.

Adding a field to nest other components

In the field with the placeholder Enter a key value we will add slides since this will the property we want to have for our Slider. After entering that press the Add button and instead of Text as field type we will choose the Blocks field type. Last step to complete and save the schema we will have to press Save schema at the top right corner.

Now we should be inside the Slider component and see a property slides with the same Add Block button we saw before. We are now able to add another component to the Slider component itself - the actual Slide.

Adding a Slide Component

Our slider component is already done, but to allow multiple slides to be in that slider component we will have to create the child component which we will call slide. To do so we will again start with pressing Add Block and search for the slide component that does not yet exist.

Instead of clicking on the Slider component we again will click on Create new 'slide'. After doing so we should be inside the Slide component and are able to define the fields for our slide itself. The same way we've added the slides key we will now add:

| Key-Name | Field-Type | |-------|-------| | image | Image | | alt | Text | {: class="uk-table uk-table-striped"}

After doing so you should end up with a schema similar to the one we have below. You can always add new fields to your component by clicking on Define Schema.

Good job! You've now added your first nested component! Let's fill the fields of that slide component with an Unsplash image and load our current content entry. After filling those fields we will press the save button at the top right corner to save the content.

Loading the content

To get the API requests that allows us to load the current data you can either follow the tutorial showing next to the sidebar or click the arrow on the top right corner and in the now open menu you can click on Draft JSON to call the API. You should then be able to see (maybe not formatted like below) a JSON with your component.

Adding more slides

You can now use the breadcrumb in the compose mode sidebar to navigate in your JSON tree. By clicking on Slider you will be able to add more slide components to that slider component. Instead of using the breadcrumb you can also add our JavaScript Bridge and the _editable property to allow your editors to click into the slider component (in the iframe on the left) and the sidebar will switch directly to that component.

Implementation Demo

You can now go ahead and use the JSON to render out your Slider and Slide component. You can also use your favorite slider/swiper implementation, like:

• iDangerous
• Slick
• Any library or your custom implementation

To keep this tutorial as short as possible below you will find a JSfiddle with the output of only two div tags and an img tag that represents the slider and slides.

You can use this example by simply exchanging the value of the token variable with your own preview token. If you followed the tutorial you see your slides showing up instead of those from my demo space. You're not limited to render the HTML using plain JS, actually you can use whatever technology you want.

Conclusion

You can build nested content structures for all kind of use-cases. One of the most common ideas: Think of a grid with columns containing other components. Let us know what you can think of building with this feature. We would also love to hear your favorite Swiper implementation as well.