The Best Touch Slider-Responsive Swiper Slider

The Best Touch Slider-Responsive Swiper Slider

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 user 1024x441 - The Best Touch Slider-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.

    Subscribe to this blog to get latest post direct into your inbox.

    Share the Article

    About author
    Darshan Saroya

    Darshan Saroya

    A passionate WordPress Theme Developer. I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

    1 Comment

    Lukhi Diamond

    Lukhi Diamond

    November 24, 2017 at 11:54 am Reply

    Nice And Very useful info,
    This article important and really good the for me is Amazing write-up, Great article. Thanks!