🏷️

Container: Horizonal slider

What does it do?

Slides a collection of elements horizontally.

image

The Tags:

Each tag is a different animation.

[container:slider:default]

image

[container:slider:cube]

image

[container:slider:parallax]

image

[container:slider:zoom]

image

[container:slider:crossfade]

image

[container:slider:pager]

image

[container:slider:rotate]

image

[container:slider:horizontal]

image

Which layer can I put it on: a 2nd-level container

Optional Tags

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

  1. [slider-indicator:#FFFFFF]
    1. image
    2. Adds a dots indicator at the bottom of the slide container, with the specified color (use HEX code).
    3. Which layer can I put it on: the same layer as the [container:slider] tag.
    4. 💡

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

  2. [slider-infinite]
    1. image
    2. After the last slide, the first slide will be shown, so user can swipe in one direction infinitely.
    3. Which layer can I put it on: the same layer as the [container:slider] tag.
  3. [slider-automatic]
    • Slider will move automatically every 5 seconds.
    • Which layer can I put it on: the same layer as the [container:slider] tag.

How do I set it up in the design tool?

  1. Create a slide design with your slides lined up next to each other horizontally, with each "slide" in its separate container.
  2. 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.

    Make sure each slide stretches the full width of the screen.
    Make sure each slide stretches the full width of the screen.
    If your design has slides smaller than the width of the screen, use

  3. 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.
  4. Container setup for slides the full width of the app screen.
    Container setup for slides the full width of the app screen.
    Container setup for slides smaller than the width of the app screen.
    Container setup for slides smaller than the width of the app screen.

  5. Paste the slide animation Tag of your choice to the layer name of this container.
  6. image

  7. Import to Bravo & preview on Bravo Vision 🚀
  8. If you want to connect API data to your slider, you only need to create the first slide as a placeholder design.
  9. image

  10. 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 2nd-level container.
  11. image

  12. If you want each slide to open another page, make sure you link the individual slide element to the other page.
  13. image

7. Preview on Bravo Vision 🚀

⚠️

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

💾 Resources

👉 Sample Figma file

👉 Sample Adobe XD file