Responsive and Flexible Mobile Touch Slider - Swiper

Responsive and Flexible Mobile Touch Slider - Swiper
File Size: 1.53 MB
Views Total: 216809
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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:

Table Of Contents:

Basic Usage (v6+):

1. Install the package with NPM.

$ npm i swiper --save

2. Import the Swiper as an ES module into your project.

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

3. Or load the necessary JavaScript and CSS files from a CDN.

<link rel="stylesheet" href="" />
<script src=""></script>

<!-- OR -->
<link rel="stylesheet" href="" />
<script type="module">
  import Swiper from ''

4. Add slides to the swiper.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>

5. Initialize the swiper and done.

var swiper = new Swiper('.swiper-container');

6. Add pagination & navigation controls to the swiper if needed.

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Scrollbar -->
<div class="swiper-scrollbar"></div>
var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    scrollbar: {
      el: '.swiper-scrollbar',
      hide: true,

7. This is a full list of availble configurations that can be used to customize your swiper.

var swiper = new Swiper('.swiper-container',{
    // auto init the intance
    init: true,

    // 'horizontal' or 'vertical' 
    direction: 'horizontal',

    // target element to listen touch events on. 
    touchEventsTarget: 'container',

    // initial slide index
    initialSlide: 0,

    // animation speed
    speed: 300,

    // whether to use modern CSS Scroll Snap API.
    cssMode: false,

    // auto update on window resize
    updateOnWindowResize: true,

    // Overrides
    width: null,
    height: null,

    // allow to change slides by swiping or navigation/pagination buttons during transition
    preventInteractionOnTransition: false,

    // for ssr
    userAgent: null,
    url: null,

    // To support iOS's swipe-to-go-back gesture (when being used in-app).
    edgeSwipeDetection: false,
    edgeSwipeThreshold: 20,

    // Free mode
    // If true then slides will not have fixed positions
    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,

    // slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
    effect: 'slide',

    // Breakpoints
    /* eg
       breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 2,
          spaceBetween: 20
        // when window width is >= 480px
        480: {
          slidesPerView: 3,
          spaceBetween: 30
        // when window width is >= 640px
        640: {
          slidesPerView: 4,
          spaceBetween: 40
    breakpoints: undefined,

    // Slides grid
    spaceBetween: 0,
    slidesPerView: 1,
    slidesPerColumn: 1,
    slidesPerColumnFill: 'column',
    slidesPerGroup: 1,
    slidesPerGroupSkip: 0,
    centeredSlides: false,
    centeredSlidesBounds: 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,

    // Options for touch events
    touchRatio: 1,
    touchAngle: 45,
    simulateTouch: true,
    shortSwipes: true,
    longSwipes: true,
    longSwipesRatio: 0.5,
    longSwipesMs: 300,
    followFinger: true,
    allowTouchMove: true,
    threshold: 0,
    touchMoveStopPropagation: false,
    touchStartPreventDefault: true,
    touchStartForcePreventDefault: false,
    touchReleaseOnEdges: false,

    // Unique Navigation Elements
    uniqueNavElements: true,

    // Resistance
    resistance: true,
    resistanceRatio: 0.85,

    // Use ResizeObserver (if supported by browser) on swiper container to detect container resize (instead of watching for window resize)
    resizeObserver: false,

    // 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,
    loopPreventsSlide: true,

    // Swiping/no swiping
    allowSlidePrev: true,
    allowSlideNext: true,
    swipeHandler: null,

    // '.swipe-handler',
    noSwiping: true,
    noSwipingClass: 'swiper-no-swiping',
    noSwipingSelector: null,

    // Passive Listeners
    passiveListeners: true,

    // Default classes
    containerModifierClass: 'swiper-container-',
    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

8. 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

// Changes slider direction from horizontal to vertical and back.

// update size
mySwiper.updateSize() ;

// update slides

// update progress

// update classes

// detach all event listeners

// attach all event listeners

// destroy the swiper instance
mySwiper.destroy(deleteInstance, cleanStyles); 

// 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

// set custom CSS transforms

// animate custom css3 transform's translate value for swiper wrapper
mySwiper.translateTo(translate, speed, runCallbacks, translateBounds);

// 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

9. 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('toEdge', 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

mySwiper.on('hashChange', function(){
  // do something

mySwiper.on('hashSet', function(){
  // do something

mySwiper.on('beforeLoopFix', function(){
  // do something

mySwiper.on('loopFix', function(){
  // do something

mySwiper.on('breakpoint', function(){
  // do something

10. Available Props.


11. Check out the Full API for more information.

Basic Usage (v5):

1. Download the Swiper v5 and then 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


v6.8.0 (2021-07-23)

  • Bug Fixes

v6.7.1 (2021-06-30)

  • core: add ParallaxOptions types
  • core: allow wrapperClass to be multiple classes
  • core: make focusableElements configurable
  • core: use window.matchMedia to detect window width for breakpoints
  • bugfixes

v6.7.0 (2021-05-31)

  • core: starter html layout can be optional with new createElements: true parameter
  • autoplay: if disableOnInteraction and pauseOnMouseEnter, it will stop autoplay on interaction
  • vue: add support for use Swiper as async component
  • bugfixes

v6.6.2 (2021-05-23)

  • core: fix breakpoints enabled detection

v6.6.1 (2021-05-12)

  • core: fix breakpoints enabled detection

v6.6.0 (2021-05-12)

  • core: make autoHeight work with Virtual slides
  • zoom: don't toggle zoom on slides without zoom-container
  • autoplay: new pauseOnMouseEnter parameter to pause autoplay on mouse enter over container
  • core: new parameters and methods to enable/disable Swiper dynamically
  • react: add the missing render function type

v6.5.5 (2021-04-09)

  • Bug Fixes

v6.5.4 (2021-04-06)

  • Bug Fixes
  • a11y.slideLabelMessage
  • custom html element support 
  • navigation: set disabled prop on nav element if it is a <button> element

v6.5.0 (2021-03-06)

  • components: added "resizeObserver" boolean option/prop to enable ResizeObserver
  • core: added support to use ResizeObserver with new "resizeObserver" parameter
  • core: possible to enable breakpoints based on container width (instead of window width)
  • Bugs fixed

v6.4.15 (2021-02-27)

  • Bug Fixes

v6.3.1 - v6.3.5 (2020-11-06)

  • Bugs fixed

v6.2.0 (2020-09-04)

  • A11y: Added new parameters containerMessage, containerRoleDescriptionMessage and itemRoleDescriptionMessage
  • React & Vue components updated

v6.2.0 (2020-09-04)

  • All new Swiper Vue.js (v3) components

v6.1.3 (2020-09-03)

  • Pagination: Now it won't set a11y attributes on customly rendered bullets

v6.0.0 - v6.1.2 (2020-08-19)

  • All scripts transpiled to ES5

v5.4.1 (2020-05-26)

  • Fixed dependencies versions

v5.4.0 (2020-05-21)

  • Added hashChange and hashSet events
  • Added support for <picture> lazy loading
  • Potentially improved vertical scrolling issues on Windows/Linux OS
  • Minor fixes

v5.3.7 (2020-04-15)

  • Fixed cssMode behavior in RTL layout
  • Fixed issue with not working double-tap to toggle with virtual slides

v5.3.7 (2020-02-29)

  • Fixed wrong auto height calculation with centeredSlides enabled
  • Now it will update auto height (if enabled) on lazy image loaded
  • Fixed issue when previously active slide could be zoomed with API
  • Fixed issue when zoom didn't work on <picture> element
  • Added support for custom zoom-target element by adding swiper-zoom-target class to such elements
  • stretch parameter now can be set in %

v5.3.1 (2020-02-09)

  • New slidesPerGroupSkip behavior

v5.3.0 (2020-01-15)

  • New slidesPerGroupSkip behavior
  • New ratio-based breakpoints
  • Added SCSS interpolation
  • Mousehweel: Fixed issue when it can fail on load
  • Minor fixes

v5.2.1 (2019-11-18)

  • New loop events beforeLoopFix and loopFix
  • New parameter updateOnWindowResize (by default true) that will update/recalc swiper on window resize/orientationchange
  • Added SCSS interpolation for --swiper-theme-color variable when not building from source
  • Quote SCSS color names
  • Fixed issue when .once could be called more than once
  • Fixed scroll wheel unwanted frozen effect
  • New multipleActiveThumbs (by default true) option to control whether multiple thumbnail slides may get activated or not.
  • Minor fixes

v5.2.0 (2019-10-26)

  • New centeredSlidesBounds parameter that when enabled will keep first and last slides at bounds
  • Fixed issue when freeMode could break position on resize 
  • Fixed transitin duration issue with freeModeSticky
  • Fixed issue with wrong row/column if not full groups 
  • Fixed issue when watchOverflow and slidesOffsetBefore/slidesOffsetAfter couldn't work together
  • Faster & smoother mousewheel inertial scrolling
  • Added source maps to package builds
  • Added minified version of browser.esm.bundle
  • Minor fixes

v5.1.0 (2019-10-16)

  • Fixed issues with touch on iOS 13
  • New translateTo method
  • Improved dynamic bullets behavior when loop: true
  • Fixed issue with pinch to zoom on Android
  • Minor fixes

v5.0.4 (2019-09-30)

  • Now on short swipes over navigation buttons, it will treat it like nav button click 
  • Fixed issue when passing float slidesPerView could break loop mode 
  • Fixed issue with wrong "pointer" position calculation on scroll bar tap
  • Fixed issue when it was paused after returning from hidden tab
  • Minor fixes

v5.0.3 (2019-09-19)

  • touchEventsTarget defaults back to container
  • Added handling of touchcancel event
  • Fixed issue with wrong order calculation in slidesPerColumnFill: 'row' mode
  • Fixed issue with slides missplacing when prepending slides in virutal mode
  • Fixed issue when zoomed image still swiped to another slide on mobiles

v5.0.0 (2019-09-19)

  • All new CSS Scroll Snap mode (can be enabled with cssMode: true). It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurations
  • Fully removed Internet Explorer support
  • breakpointsInverse parameter has been removed and now breakpoints behave like with breakpointsInverse: true before.
  • touchMoveStopPropagation parameter now defaults to false
  • click event won't be fired with 300ms delay anymore. Now it will be fired at the same time as tap event
  • When slidesPerColumnFill: 'column' it now uses flex-direction: column layout which requires specified height on swiper-container
  • touchEventsTarget now defaults to wrapper (rather than container like before)
  • slidesPerColumn now can be used with breakpoints
  • Now Swiper styles use CSS Custom Properties (CSS Custom Variables) to specify swiper's color theme (color of navigation buttons/pagination). It is now --swiper-theme-color: #007aff;
  • Improved es module "tree-shake-ability"
  • New swiper.esm.browser.bundle.js package that can be used directly in browser (import Swiper from 'swiper.esm.browser.bundle.js')
  • Now it will be paused when document becomes hidden (in not active tab) and continued again when document becomes visible
  • Swiper preloader image replaced with a little bit simpler loader. Now its color can be changed with --swiper-preloader-color CSS custom property (which is defaults to --swiper-theme-color)
  • Active pagination bullets and pagination theme colors now use CSS Custom Properties. It can be defined with --swiper-pagination-color property (which is defaults to --swiper-theme-color)
  • Navigation icons reworked with built-in (base64) icon font. It allows to apply any color and size without replacing image
  • Navigation buttons colors now use CSS Custom Properties. It can be defined with --swiper-navigation-color property (which is defaults to --swiper-theme-color)
  • With --swiper-navigation-size (defaults to 44px) it is now possible to change size of the navigation buttons (and icons)
  • Minor fixes and improvements

v4.5.0 (2019-07-27)

  • New swiper.changeDirection() method to change direction from horizontal to vertical (and back) dynamically
  • direction parameter can be used in breakpoints
  • swiper.virtual.appendSlide now accepts array of slides to add
  • swiper.virtual.prependSlide now accepts array of slides to prepend
  • New swiper.virtual.removeSlide(indexes) to remove virtual selected slides
  • New swiper.virtual.removeAllSlides() to remove all virtual slides
  • Now the navigation emits navigationHide and navigationShow events when on nav hide/show
  • Now the pagination emits paginationHide and paginationShow events when on pagination hide/show
  • Fixed issue when .once bound event could still be there after unbinding it with .off
  • Source styles are now available in SCSS in addition to LESS
  • Minor fixes and improvements

v4.4.5 (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.