> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create an image slider

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

|    |    |
| --- | --- |
| [1. With the interactive element](#2-with-the-interactive-element) | [2. With conditional rendering](#2-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 manager**
* 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

![Interactive slideshow element](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/slideshow_bxnvvo.gif)

## 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**.

![Enabling conditional rendering in Project settings](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-enable-conditional-rendering_1u5rbzg.gif)

### 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.**

![Image slideshow layout](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-slideshow-layout_16ucdpk.gif)

### 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**

![Styling the component container](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-component-styling_1nilxj3.gif)

#### Row (main container)

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

![Styling the main row element](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-container-styling_t0jew9.gif)

#### 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**. 

![Styling the image](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/5-image-styling_y6rumv.gif)

#### 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.

![Styling the buttons](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/6-button-styling_1vxzs11.gif)

|| 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**.

![Creating component state](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/7-setup-cr-state_16blami.gif)

#### 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**.

![Adding conditional rendering to slides](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/8-conditional-rendering-state_1ym949u.gif)

#### 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.

![Adding events to change state on the buttons](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/9-adding-events_ob9p70.gif)

## 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.

![Previewing a conditionally rendered component](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/10-preview_fspqbt.gif)

To learn more about about using Conditional Rendering check out this [article](/en/article/getting-started-with-conditional-rendering-ugtqhd/).

${youtube}[How to create an HTML & CSS image slider or slideshow for your website](vfB6doCepUA)