How to create an image slider

Here are two different ways to create a slider in the platform.

With the interactive element
With conditional rendering

With the interactive element

The easiest way to create a slider that can contain either images or content is by using the Interactive element. Here's how to do it:

Go to the Left panel -> Elements -> Interactive elements.
Scroll to the bottom
Drag the slider element to the canvas

By default the content in the slides will be images set up as background images.

To change the image in a slide:

From the Left panel > Layers and Files select one of the slides
Go to Assets
Click the replace icon to change the image

To add a different type of content to the slide:

From the Left panel > Layers and Files select one of the slides
Add any other type of element to the slide (ex: container)
Drag other elements to the container

With conditional rendering

Enable conditional rendering

Click on the project name and go to Project settings -> Advanced features and check Conditional rendering and Developer mode and then click Save changes.

Create carousel layout

Go to the Left panel, Layers and Files tab and click the “+” button and New component and name it Slideshow.

In the component container add a row element and name it Slide1. Inside the row element add in this order the following:

a. Column - name it: leftButton
b. Image - name it: sliderImage
c. Column - name it: rightButton

Select the leftButton container, go to the Left panel -> Assets manager -> Icons, and there search for “Arrow”.
Drag a ← icon inside the container.

Similarly, In the rightButton container add a → icon.

Style the carousel

An image slider consists basically of an Image and two buttons and the styling can vary for each project.

For this use case we will create a full width image slider with buttons that hover above the image.

Component styling

Go to the Right panel -> Visual tab -> Size and change default height to auto

Row (main container)

Go to the Right panel -> Visual tab -> Size and change the width to 100% and the height to auto

Image styling

Select the image and go to the Right panel -> Size and change width to 100% and height to 50vh.
Go to the Left panel -> Assets manager -> Unsplash, select an image and click the ⇄ (replace) icon.

Button styling

Select both the leftButton and the rightButton using CTRL-CMD click.
Go to the Right panel -> Size and give them 50px height and 50px width.
Go to the Background section and choose a color.
Go to Radius and add 50% to make the buttons round.



We recommend that you create CSS classes for the main container, buttons and image to keep the code to a minimum.

Add the functionality

Now that one of the slides is built and styled you need to duplicate it for how many slider images you want in your carousel.

For this example we will create a slideshow with 3 slides.

Go to the Left panel -> Layers and files tab and select Slide1, right click and Duplicate two times. Rename these as slide2 and slide3 and replace the images like we did for slide1.

Create conditional rendering state

In the top right corner of the canvas click on Setup -> State -> click on the “+” button.
In the name field add a name like imageSlide. Select the number Type and give it a default value of 1 then click Create.

Add conditional rendering to slides

Select slide1 and go to the Right panel -> Conditional rendering section and enable Conditional rendering.
In the State to bind field select the imageSlide state and give it a value of 1.
Repeat the process but for Slide2 add the value of 2 and for Slide3 add the value of 3.

Add events to the buttons

In the Slide1 container select the rightButton and go to the Right panel -> Events tab.
In the Action section leave click.
In the Modifies section select the imageslide state that you previously created.
In the To section select 2.

Doing this will make the slideshow change from Slide 1 to Slide 2, the next slide.

In the slide1 container select the leftButton and go to the Right panel -> Events tab.
In the Action section leave click.
In the Modifies section select the imageslide state.
In the To section select 2.

Doing this will make the slideshow change from Slide 1 to Slide 3, the previous slide.

Repeat the same process for slide2 and slide3.

Slide 2 leftButton modifies to 1. Slide 2 rightButton modifies to 3.
Slide 3 leftButton modifies to 2. Slide 2 rightButton modifies to 1.

Now the functionality for the image slideshow has been set.

Preview the image slider

To preview the image slider add the component that was created to a page and from the left of the Top bar switch to the Developer mode.

Click on the Sync Project button and preview the image slider.



To learn more about about using Conditional Rendering check out this article.

Updated on: 01/03/2024