# Carousel slider
## 👉 **The Tag**
Slides a collection of containers horizontally. The slider can have different animations, depending on the tag placed (see section below).
**📍 Where to add the tag:** A second-level container
## 🏷️ Animation Tags
Each tag is a different animation. In the tabs below you can discover all of them!
{% tabs %}
{% tab title="Default" %}
```
[container:slider:default]
```
{% endtab %}
{% tab title="Crossfade" %}
```
[container:slider:crossfade]
```
{% endtab %}
{% tab title="Cube" %}
```
[container:slider:cube]
```
{% endtab %}
{% tab title="Pager" %}
```
[container:slider:pager]
```
{% endtab %}
{% tab title="Parallax" %}
```
[container:slider:parallax]
```
{% endtab %}
{% tab title="Rotate" %}
```
[container:slider:rotate]
```
{% endtab %}
{% tab title="Zoom" %}
```
[container:slider:zoom]
```
{% endtab %}
{% tab title="Horizontal" %}
```
[container:slider:horizontal]
```
{% endtab %}
{% endtabs %}
## 🏷️ Optional Tags
You can add as many of these tags as you want to the slider container.
{% tabs %}
{% tab title="Slider Indicator" %}
```
[slider-indicator:#FFFFFFFF]
```
```
[slider-indicator::]
```
Adds a dots indicator at the bottom of the slide container, with the specified color (use 8-digit HEX code - alpha included). \
\
You can also specify a color for the active item and another color for the inactive ones.
**📍 Where to add the tag:** on the same layer as the `[container:slider]` tag.\
\
For example \[slider-indicator:] needs to be:
\[slider-indicator:#FFFF0000:#FF00FF00]. \
For #FF0000 and #00FF00, we add FF at the beginning to set alpha at 1 (no transparency).
{% hint style="warning" %}
This tag is supported for all slider animations except for `[container:slider:horizontal]`.
{% endhint %}
{% endtab %}
{% tab title="Infinite slide" %}
```
[slider-infinite]
```
After the last slide, the first slide will be shown, so user can swipe in one direction infinitely.
**📍 Where to add the tag:** on the same layer as the `[container:slider]` tag.
{% endtab %}
{% tab title="Automatic slide" %}
```
[slider-automatic:]
```
Slider will move automatically **every x seconds**.
For example: 8 seconds `[slider-automatic:8]`
**📍 Where to add the tag:** on the same layer as the `[container:slider]` tag.
{% endtab %}
{% endtabs %}
{% hint style="info" %}
You can also add the tags `[action:prev-slide]`and \[action:next-slide] to any design element (i.e. buttons) for easy navigation between slides.
{% endhint %}
## 🏷️ **How to add the tag**
1. Create a slide design with your slides lined up next to each other horizontally, with each "slide" in its separate container. If you want to connect your slider to a list of data from API, see **step 5**.
{% hint style="info" %}
Only the `[container:slider:horizontal]` (i.e. horizontal scroll) allows for slides that are smaller than the width of the screen. All other slide effects must have individual slides that stretches the full width of the screen.
{% endhint %}
![If your design has slides smaller than the width of the screen, use \[container:slider:horizontal\]. ](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5D75tnyrVfC0qRyic%2F-Mg5G4l_1pJTO7Ky-YKy%2FScreenshot_2020-09-09_at_17.29.55.png?alt=media\&token=664c660f-21f1-443d-8851-a53078cb2fd2)
2\. **Create a container around the slider design** that contains all of your slides and is the full width of the screen. Similar to how you set up overflow behaviour for Figma prototype.
3\. Paste the slide animation Tag of your choice to the layer name of this container.
4\. Import to Bravo & preview on Bravo Vision 🚀
5\. If you want to connect API data to your slider, you only need to create the first slide as a placeholder design.
6\. Then connect your list of data the same way you would with a vertical scrolling list ([tutorial here](https://docs.bravostudio.app/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-list-page)). However, you need to connect the data array to the **individual slide element**, rather than the slider container.
7\. If you want each slide to open another page, make sure you link the individual slide element to the other page.
8\. Preview on Bravo Vision 🚀
{% hint style="danger" %}
You cannot use the \[flexo] tag in a slider, as all slides need to have the same fixed size.
{% endhint %}
## 💾 Example files
Duplicate the files below to see how to set it up!
{% embed url="" %}
{% file src="" %}
Bravo Sample - Horizontal Sliders.xd
{% endfile %}