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
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:
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:
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. |