Javatpoint Logo
Javatpoint Logo

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


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.

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA