Login With Github

Swiper API: Parallax

Swiper supports parallax transition effects for swiper/slides nested elements. There are two types of parallax elements supported:

  • Direct child elements of swiper-container. Parallax effect for such elements will depend on total slider progress. Useful for parallax backgrounds
  • Slides child elements. Parallax effect for such elements will depend on slide progress

To enable parallax effects you need to init Swiper with passed parallax:true parameter and add one of the following (or mix) attributes to required elements:

  • data-swiper-parallax - enable transform-translate parallax transition. This attribute may accept:
    • number - value in px (as for title, subtitle in example above) to move element depending on progress. In this case such element will be moved on ± this value in px depending on slide position (next or previous)
    • percentage - (as for "parallax-bg") to move element depending on progress and on its size. In this case such element will be moved on ± this percentage of its size (width in horizontal direction, and height in vertical direction) depending on slide position (next or previous). So if element has 400px width and you specified data-swiper-parallax="50%" then it will be moved on ± 200px
  • data-swiper-parallax-x - same but for x-axis direction
  • data-swiper-parallax-y - same but for y-axis direction
  • data-swiper-parallax-scale - scale ratio of the parallax element when it is in "inactive" (not on active slide) state
  • data-swiper-parallax-opacity - opacity of the parallax element when it is in "inactive" (not on active slide) state
  • data-swiper-parallax-duration - custom transition duration for parallax elements
<div class="swiper-container">
    <!-- Parallax background element -->
    <div
        class="parallax-bg"
        style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)"
        data-swiper-parallax="-23%">
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Each slide has parallax title -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- Parallax subtitle -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- And parallax text with custom transition duration -->
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
            <!-- Opacity parallax -->
            <div data-swiper-parallax-opacity="0.5" >I will change opacity</div>
            <!-- Scale parallax -->
            <div data-swiper-parallax-scale="0.15" >I will change scale</div>
        </div>
        ...
    </div>
</div>

Parallax Parameters

Parameter Type Default Description
parallax boolean false Enable, if you want to use "parallaxed" elements inside of slider

0 Comment

temp