Responsive and Flexible Mobile Touch Slider - Swiper

Responsive and Flexible Mobile Touch Slider - Swiper

Swiper is a powerful javascript library to implement responsive, accessible, flexible, touch-enabled carouses/sliders on your mobile websites and apps. Can be used as a jQuery plugin.

It also comes with 2 plugins: 3D Flow (App Store like 3D slider plugin that turns your great swiper slider (or app) into amazing realistic 3D gallery with dynamic shadows.) and Scrollbar (Add fully customizable eye-catching scrollbars to your Swiper slider (or app)).


  • Responsive design
  • Small and fast
  • Fully accessible
  • Supports any html elements, not only images
  • Supports¬†Vertical/Horizontal animations and swipes
  • Parallax transition effects
  • Image lazy load
  • Keyboard interactions
  • Works on iOS, Android and latest Desktop browsers

View more:

Basic Usage:

1. Include jQuery library (OPTIONAL) and the Swiper.js on your webpage

<script src="jquery.min.js"></script>
<script src="swiper.min.js"></script>

2. Include required stylesheet on the page.

<link rel="stylesheet" href="swiper.min.css">

3. Create the html for the swiper.

<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the first slide goes here -->
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the second slide goes here -->
      <!--Third Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the third slide goes here -->

4. Initialize the swiper with optional settings.

var mySwiper = new Swiper ('.swiper-container', {
    // options here

5. All possible plugin options to customize the swiper.

init: true,
direction: 'horizontal', // or 'vertical'
touchEventsTarget: 'container',
initialSlide: 0,
speed: 300,
preventInteractionOnTransition: false,
// To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView).
edgeSwipeDetection: false,
edgeSwipeThreshold: 20,
// Free mode
freeMode: false,
freeModeMomentum: true,
freeModeMomentumRatio: 1,
freeModeMomentumBounce: true,
freeModeMomentumBounceRatio: 1,
freeModeMomentumVelocityRatio: 1,
freeModeSticky: false,
freeModeMinimumVelocity: 0.02,
// Autoheight
autoHeight: false,
// Set wrapper width
setWrapperSize: false,
// Virtual Translate
virtualTranslate: false,
// Effects
effect: 'slide', // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
// Breakpoints
breakpoints: undefined,
breakpointsInverse: false,
// Slides grid
spaceBetween: 0,
slidesPerView: 1,
slidesPerColumn: 1,
slidesPerColumnFill: 'column',
slidesPerGroup: 1,
centeredSlides: false,
slidesOffsetBefore: 0, // in px
slidesOffsetAfter: 0, // in px
normalizeSlideIndex: true,
centerInsufficientSlides: false,
// Disable swiper and hide navigation when container not overflow
watchOverflow: false,
// Round length
roundLengths: false,
// Touches
touchRatio: 1,
touchAngle: 45,
simulateTouch: true,
shortSwipes: true,
longSwipes: true,
longSwipesRatio: 0.5,
longSwipesMs: 300,
followFinger: true,
allowTouchMove: true,
threshold: 0,
touchMoveStopPropagation: true,
touchStartPreventDefault: true,
touchStartForcePreventDefault: false,
touchReleaseOnEdges: false,
// Unique Navigation Elements
uniqueNavElements: true,
// Resistance
resistance: true,
resistanceRatio: 0.85,
// Progress
watchSlidesProgress: false,
watchSlidesVisibility: false,
// Cursor
grabCursor: false,
// Clicks
preventClicks: true,
preventClicksPropagation: true,
slideToClickedSlide: false,
// Images
preloadImages: true,
updateOnImagesReady: true,
// loop
loop: false,
loopAdditionalSlides: 0,
loopedSlides: null,
loopFillGroupWithBlank: false,
// Swiping/no swiping
allowSlidePrev: true,
allowSlideNext: true,
swipeHandler: null, // '.swipe-handler',
noSwiping: true,
noSwipingClass: 'swiper-no-swiping',
noSwipingSelector: null,
// Passive Listeners
passiveListeners: true,
// CSS selectors
containerModifierClass: 'swiper-container-', // NEW
slideClass: 'swiper-slide',
slideBlankClass: 'swiper-slide-invisible-blank',
slideActiveClass: 'swiper-slide-active',
slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
slideVisibleClass: 'swiper-slide-visible',
slideDuplicateClass: 'swiper-slide-duplicate',
slideNextClass: 'swiper-slide-next',
slideDuplicateNextClass: 'swiper-slide-duplicate-next',
slidePrevClass: 'swiper-slide-prev',
slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
wrapperClass: 'swiper-wrapper',
// Callbacks
runCallbacksOnInit: true,

6. API methods.

// go to next slide at a given speed
mySwiper.slideNext(speed, runCallbacks)
// back to previous slide at a given speed
mySwiper.slidePrev(speed, runCallbacks)
// slide to a specific slide at a given speed
mySwiper.slideTo(index, speed, runCallbacks)
// Does the same as .slideTo but for the case when used with enabled loop.
mySwiper.slideToLoop(index, speed, runCallbacks)
// Reset swiper position to currently active slide
mySwiper.slideReset(speed, runCallbacks)
// Reset swiper position to closest slide/snap point
mySwiper.slideToClosest(speed, runCallbacks)
// Update height
// Update swiper
// update size
// update slides
// update progress
// update classes
// detach all event listeners
// attach all event listeners
// destroy the swiper instance
mySwiper.destroy(deleteInstance, cleanStyles);  Destroy slider instance and detach all events listeners, where
// append new slides to the slider
// prepend new slides to the slider
// add new slides
mySwiper.addSlide(index, slides)
// remove a slide
// remove all slides
mySwiper.removeAllSlides(); Remove all slides
// set custom CSS transforms
// get the current transform value
// add event listener
mySwiper.on(event, handler) 
// that will be executed only once
mySwiper.once(event, handler)
// remove event listener for specified event, handler)
// remove all listeners
// unset grab cursor
// set grab cursor

7. Event listeners.

mySwiper.on('beforeDestroy', function(){
  // do something
mySwiper.on('slideChange', function(){
  // do something
mySwiper.on('slideChangeTransitionStart', function(){
  // do something
mySwiper.on('slideChangeTransitionEnd', function(){
  // do something
mySwiper.on('slideNextTransitionStart', function(){
  // do something
mySwiper.on('slideNextTransitionEnd', function(){
  // do something
mySwiper.on('slidePrevTransitionStart', function(){
  // do something
mySwiper.on('slidePrevTransitionEnd', function(){
  // do something
mySwiper.on('transitionStart', function(){
  // do something
mySwiper.on('transitionEnd', function(){
  // do something
mySwiper.on('imagesReady', function(){
  // do something
mySwiper.on('reachBeginning', function(){
  // do something
mySwiper.on('reachEnd', function(){
  // do something
mySwiper.on('fromEdge', function(){
  // do something
mySwiper.on('resize', function(){
  // do something
mySwiper.on('observerUpdate', function(){
  // do something
mySwiper.on('touchStart', function(e){
  // do something
mySwiper.on('touchMove', function(e){
  // do something
mySwiper.on('touchMoveOpposite', function(e){
  // do something
mySwiper.on('sliderMove', function(e){
  // do something
mySwiper.on('touchEnd', function(e){
  // do something
mySwiper.on('click', function(e){
  // do something
mySwiper.on('tap', function(e){
  // do something
mySwiper.on('doubleTap', function(e){
  // do something
mySwiper.on('progress', function(progress){
  // do something
mySwiper.on('setTranslate', function(translate){
  // do something
mySwiper.on('setTransition', function(transition){
  // do something


v4.x (2018-11-12)

  • New options and API.
  • Bugfixes
  • Updated doc.

v3.4.2 (2017-03-19)

  • Fixed an issue with lazy loading callbacks when swiper is destroyed
  • New onAfterResize and onBeforeResize callbacks
  • New onKeyPress callback when keyboard control is used
  • Fixed Chrome+Windows issue with not clickable links that have "title" attribute
  • Minor fixes

This awesome jQuery plugin is developed by nolimits4web. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 12.11.2018
  • Source