Framework7 - Swiper Slider

Description

The swiper slider is 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 below 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 a optional for pagination bullets and those are created automatically.

You can initialize swiper with JavaScript using it's related methods:

myApp.swiper(swiperContainer,parameters)

OR

new Swiper(swiperContainer, parameters)

Both methods used to initialize slider with options.
The above methods contain following parameters:

• swiperContainer: It is HTMLElement or string of a swiper container and it is required.
• parameters: These are optional element contains objet with swiper parameters.

For example:

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

It is possible to access swiper's instance and the swiper property of slider's container has 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 below table:

S.N.	Swiper Types & Description
1	Default Swiper With Pagination It is a modern touch slider and swiper swipe by default horizontal way.
2	Vertical Swiper This one also work as default swiper but, it swipe in vertically way.
3	With Space Between Slides This swiper used to give space between two slides.
4	Multiple Swipers This swiper use more than one swipers on 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.