Framework7 - Swiper Slider



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 ...
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></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 −



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:

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

S.No Swiper Types & Description
1 Default Swiper With Pagination

It is a modern touch slider and the swiper swipes horizontally, by default.

2 Vertical Swiper

This one also works as a default swiper but it swipes vertically.

3 With Space Between Slides

This swiper is used to give space between two slides.

4 Multiple Swipers

This swiper uses more than one swipers on a single page.

5 Nested Swipers

It is the combination of vertical and horizontal slides.

6 Custom Controls

It is used for custom controls to choose or swipe any slide.

7 Lazy Loading

It can be used for multimedia file, which takes time to load.