Responsive Swiper slider –
Hello, everyone today we are talking about “swiper slider”. Slider plays an important role in making any website. For an HTML, developer swiper is a better option because of its lots of the features. Framework7 comes with powerful and most modern touch slider ever – Swiper Slider with super flexible configuration and lot, the lot of features.
Swiper is an ultimate and responsive slider also mobile touch slider. This is a free slider with MIT license. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.It is easy to download swiper.
Best Features –
- Full-time RTL support
- 3D effects
- Two-way control
- Parallax transition
- Virtual slides
- Images Lazy load
- Multirow slide layout
- Flexbox layout
- Touch galleries
- Free and open source
– Let’s Started With Responsive Swiper slider –
1. How to Download and install Swiper
First of all, we need to download Swiper :
We can download it from GitHub(https://github.com/nolimits4web/Swiper/tree/master/dist) repository
Or we can install them via Bower, enter into the terminal:
$ bower install swiper
Or, using Atmosphere as Meteor package:
$ meteor add nolimits4web: swiper
Or, using NPM
$ npm install swiper
In the downloaded/installed package we need files from the folder.
2. Include swiper files in the project
If you don’t want to include Swiper files in your project, you may use it from Swiper on cdnjs. The following files are available:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js
Note – here 4.x.x is the version of swiper, so you need to change it with the actual version of swiper.
3. Add HTML Layout Of Swiper
This is important to add layout in the proper way. In the header section, we include the CSS and js of the swiper. We need to give the proper path of CSS and js in “src” in the header and in the body, swiper layout is declared there. Swiper-slider, swiper-pagination, swiper-navigation buttons, swiper scrollbar are declared in the swiper-container. For the example see the below HTML structure.
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <!-- JS --> <link type="text/javascript" rel="stylesheet" href="css/swiper.min.js"/> <!-- CSS --> <link type="text/css" rel="stylesheet" href="css/swiper.min.css"/> </head> <body> <!-- Slider main container --> Slide 1 Slide 2 Slide 3 ... </div> <!-- swiper pagination --> <!-- swiper navigation buttons --> <!-- swiper scrollbar --> </div> </body> </html>
Here “css/swiper.min.css” is the path name where you have swiper CSS and js.
4. Initialize Swiper Script
In your HTML file, you can add to it(swiper script) at the bottom of the file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- JS -->
http://js/swiper.min.js
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/swiper.min.css"/>
</head>
<body>
...
$(document).ready(function() {
var swiper = new Swiper('.swiper-container',{
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: '4',
paginationClickable: true,
autoplay: false,
loop:true,
breakpoints: {
1040: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 2,
spaceBetween: 30
},
640: {
slidesPerView: 1,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});
});
</body>
</html>
In the script have lots of the parameters which you can change according to you. In the above script ” $(document).ready(function() { ” this is the function for declaration.
The list of swiper most used parameters –
| Parameter | Type | Default | Description |
|---|---|---|---|
| direction | string | ‘horizontal’ | Could be ‘horizontal’ or ‘vertical’ (for vertical slider) |
| speed | number | 300 | Duration of transition between slides (in ms) |
| effect | string | ‘slide’ | Tranisition effect. Could be “slide”, “fade”, “cube”, “coverflow” or “flip” |
| spaceBetween | number | 0 | Distance between slides in px |
| slidesPerView | number or ‘auto’ | 1 | Number of slides per view (slides visible at the same time on slider’s container). |
| slidesPerColumn | number | 1 | Number of slides per column, for multirow layout |
| loop | boolean | false | Set to true to enable continuous loop mode. By default set to ‘false’ |
| touchRatio | number | 1 | Touch ration |
| touchAngle | number | 45 | Allowable angle (in degrees) to trigger touch move. |
| simulateTouch | boolean | true | If true, Swiper will accept mouse events like touch events (click and drag to change slides) |
| preventClicks | boolean | true | Set to true to prevent accidental unwanted clicks on links during swiping |
| preventClicksPropagation | boolean | true | Set to true to stop clicks event propagation on links during swiping |
| noSwiping | boolean | true | Will disable swiping on elements matched to class specified in noSwipingClass |
| preventClicks | boolean | true | Set to true to prevent accidental unwanted clicks on links during swiping |
| freeMode | boolean | false | If true then slides will not have fixed positions |
| resistance | boolean | true | Set to false if you want to disable resistant bounds |
| touchReleaseOnEdges | boolean | false | Enable to release touch events on slider edge position (beginning, end) to allow for further page scrolling |
| allowTouchMove | boolean | true | If false, then the only way to switch the slide is use of external API functions like slidePrev or slideNext |
| wrapperClass | string | ‘swiper-wrapper’ | CSS class name of slides’ wrapper |
| breakpoints | object | Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which are not required different layout and logic, like slidesPerView, slidesPerGroup, spaceBetween. Such parameters like slidesPerColumn, loop, direction, effect won’t work. For example: var swiper = new Swiper(‘.swiper-container’, { // Default parameters slidesPerView: 4, spaceBetween: 40, // Responsive breakpoints breakpoints: { // when window width is <= 320px 320: { slidesPerView: 1, spaceBetween: 10 }, // when window width is <= 480px 480: { slidesPerView: 2, spaceBetween: 20 }, // when window width is <= 640px 640: { slidesPerView: 3, spaceBetween: 30 } } }) |
responsive Swiper Slider Users –
Swiper has lot’s of the good demo for you.
And many more demo’s are in swiper. They all are beautiful and responsive. In the demo’s you can found all types of slider, vertical, parallax, zoom, autoplay, thumb gallery, auto height, 3D Flip Effect, etc many more. All the swiper slider have their own script., which are differ then others.
The most Beautiful Properties Of swiper Slider
Keyboard Control –
Keyboard Control Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| keyboard | boolean | false | Set to true to enable navigation through slides using keyboard right and left (for horizontal mode), top and borrom (for vertical mode) keyboard arrows |
Keyboard Methods & Properties
- Properties
mySwiper.keyboard.enabled : Whether the keyboard control is enabled - Methods
mySwiper.keyboard.enable(); : Enable keyboard control
mySwiper.keyboard.disable(); : Disable keyboard control
It Is Free – Download Here
Mousewheel Control
Mousewheel Control Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| mousewheel | object/boolean | false | Enables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean true to enable with default settings. For example:
var mySwiper = new Swiper(‘.swiper-container’, { mousewheel: { invert: true, }, }); |
| forceToAxis | boolean | false | Set to true to force mousewheel swipes to axis. So in horizontal mode mousewheel will work only with horizontal mousewheel scrolling, and only with vertical scrolling in vertical mode. |
| releaseOnEdges | boolean | false | Set to true and swiper will release mousewheel event and allow page scrolling when swiper is on edge positions (in the beginning or in the end) |
| invert | boolean | false | Set to true to invert sliding direction |
| sensitivity | number | 1 | Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity |
| eventsTarged | string / HTMLElement | ‘container’ | String with CSS selector or HTML element of the container accepting mousewheel events. By default it is swiper-container |
Mousewheel Methods & Properties
- Properties
mySwiper.mousewheel.enabled : Whether the mousewheel control is enabled - Methods
mySwiper.mousewheel.enable(); : Enable mousewheel control
mySwiper.mousewheel.disable(); : Disable mousewheel control
Thanks to reading our post.Hope this will helpful to you. Don’t forget to comment below. Stay continue with us for new interesting blog post.
1 Comment
Lukhi Diamond
November 24, 2017 at 11:54 amNice And Very useful info,
This article important and really good the for me is Amazing write-up, Great article. Thanks!