Carousel slider

Slides a collection of containers horizontally.

👉 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!

[container:slider:default]

🏷️ Optional Tags

You can add as many of these tags as you want to the slider container.

[slider-indicator:#FFFFFFFF]

[slider-indicator:<active_color>:<inactive_color>]

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

This tag is supported for all slider animations except for [container:slider:horizontal].

[slider-automatic:<time-in-seconds>]

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.

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.

🏷️ How to add the tag

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.

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.

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). 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 🚀

You cannot use the [flexo] tag in a slider, as all slides need to have the same fixed size.

💾 Example files

Duplicate the files below to see how to set it up!

https://www.figma.com/community/file/982167580060315188www.figma.com

PreviousTop bar NextAspect ratio relative to screen

Last updated 2 years ago

Was this helpful?