The secret Parallax feature of the Slider element

All the slider elements in Breakdance use the SwiperJS library, and the parallax option is enabled.

What does it mean ?

Here is a slider made with the Advanced Slider element :

Put anything you want in a slide.

Put anything you want in a slide.

Put anything you want in a slide.

By using some Attributes, we can add some transition effects.

Here is the same slider, but with some parallax effects applied to the texts and images:

Put anything you want in a slide.

Put anything you want in a slide.

Put anything you want in a slide.

To add this kind of effect, we simply have to select the element inside the Slide, e.g. the heading:

Then in the Advanced panel, we just need to add some Attributes:

The list of attributes available for that feature are :

  • data-swiper-parallax-x

  • data-swiper-parallax-y

  • data-swiper-parallax-scale

  • data-swiper-parallax-opacity

  • data-swiper-parallax-duration

You can even combine them, so you can have a scale and opacity effect at the same time.

To learn more about that feature, check the Swiper API documentation : Swiper-api-parallax