Carousel slider
Slides a collection of containers horizontally.
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
Each tag is a different animation. In the tabs below you can discover all of them!
Default
Crossfade
Cube
Pager
Parallax
Rotate
Zoom
Horizontal
[container:slider:default]
[container:slider:crossfade]
[container:slider:cube]
[container:slider:pager]
[container:slider:parallax]
[container:slider:rotate]
[container:slider:zoom]
[container:slider:horizontal]
You can add as many of these tags as you want to the slider container.
Slider Indicator
Infinite slide
Automatic slide
[slider-indicator:#FFFFFF]
Adds a dots indicator at the bottom of the slide container, with the specified color (use HEX code).
📍 Where to add the tag: on the same layer as the [container:slider] tag.
This tag is supported for all slider animations except for [container:slider:horizontal].
[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.
[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.
- 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.
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.
If your design has slides smaller than the width of the screen, use [container:slider:horizontal].
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.
Container setup for slides the full width of the app screen.
Container setup for slides smaller than the width of the app screen.
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.
Connect the list request to the "Container" property of the slide element highlighted in blue.
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.
Duplicate the files below to see how to set it up!
Bravo Sample - Horizontal Sliders.xd.zip
653KB
Binary
Bravo Sample - Horizontal Sliders.xd
Last modified 3mo ago