Framework7 - Swiper Slider


Advertisements


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 −

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.



Advertisements