Framework7 Swiper Slider

Framework7 provides swiper slider which is a very powerful and modern touch slider. It also provides a lot of features.

HTML Layout of Swiper Slider

<!-- Slider container -->
<div class="swiper-container">
    <!-- Slides wrapper -->
    <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>
    <!-- Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

Here:

swiper-container: It is the main slider container class with slides and paginations. Required element

swiper-wrapper: It is an additional wrapper for slides. Required element

swiper-slide: It is a single slide element. Could contain any HTML inside

swiper-pagination: It is a container with pagination bullets where pagination bullets will be created automatically. It is an optional element.

Initialize Swiper with JavaScript

Swiper can be initialized by using following JavaScript related methods:

myApp.swiper(swiperContainer,parameters)
OR
new Swiper(swiperContainer, parameters)

Parameter Explanation:

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

parameters: These are optional elements containing object with swiper parameters.

Note: The both of the above methods can be used to initialize the slider with options.

For Example:

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

Initialize Swiper with HTML

Types of Swiper Sliders

There are several different types of swipers in Framework7:

Index	Swiper type	Description
1)	Default Swiper With Pagination	It is a modern touch slider and the swiper swipes horizontally. This is a by default swiper.
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.