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.
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
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.
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.
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
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:
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
_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.
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:
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.
You can build nested content structures for all kind of use-cases. One of the most common ideas: Think of a
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.