- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Swiper Slider
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. |
To Continue Learning Please Login
Login with Google