Framework7 - Swiper Slider

Description

The swiper slider is the most powerful and modern touch slider and comes into Framework7 with lots of features.

The following HTML layout shows the swiper slider −

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <div class = "swiper-wrapper">
      <!-- Slides -->
      <div class = "swiper-slide">Slide 1</div>
      <div class = "swiper-slide">Slide 2</div>
      <div class = "swiper-slide">Slide 3</div>
      ... other slides ...
   </div>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

The following classes are used for swiper slider −

• swiper-container − It is a required element for main slider container and it is used for slides and paginations.

• Swiper-wrapper − It is a required element for additional wrapper slides.

• swiper-slide − It is a single slide element and it could contain any HTML inside.

• swiper-pagination − It is optional for pagination bullets and those are created automatically.

You can initialize the swiper with JavaScript using its related methods −

myApp.swiper(swiperContainer,parameters)

OR

new Swiper(swiperContainer, parameters)

Both the methods are used to initialize the slider with options.

The above given methods contain the following parameters −

• swiperContainer − It is HTMLElement or string of a swiper container and it is required.

• parameters − These are optional elements containing object with swiper parameters.

For example −

var mySwiper = app.swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

It is possible to access a swiper's instance and the swiper property of the slider's container has the following HTML element −

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

You can see the different ways and types of swiper in the following table −