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:

 

 

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.

 

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.

 

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 user-responsive-swiper-slider

 

Swiper has lot’s of the good demo for you.

  • Default Setup
  • Navigation
  • Pagination
  • Pagination / Dynamic Bullets
  • Progress Pagination
  • Fraction Pagination
  • Custom Pagination
  • Scrollbar
  • Vertical Slider
  • Space Between Slides
  • Multiple Slides Per View
  • Auto Slides Per View / Carousel Mode
  • Centered Slides
  • Centered Slides + Auto Slides Per View
  • Free Mode / No Fixed Positions
  • Scroll Container
  • Multi Row Slides Layout
  • Nested Swipers
  • Grab Cursor
  • Loop Mode / Infinite Loop
  • Loop Mode with Multiple Slides Per Group
  • Fade Effect
  • 3D Cube Effect
  • 3D Coverflow Effect
  • 3D Flip Effect
  • Keyboard Control (Open in new window)
  • Mousewheel Control
  • Dynamic Slides
  • Autoplay
  • Thumbs Gallery With Two-way Control
  • Hash Navigation (Open in new window)
  • History API (Open in new window)
  • RTL Layout
  • Parallax
  • Lazy Loading Images
  • Responsive Breakpoints (Open in new window)
  • Auto Height
  • Zoom
  • Virtual Slides
  • Slideable Navigation Drawer

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.

Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.
We hate spam. Your email address will not be sold or shared with anyone else.