Responsive and Flexible Mobile Touch Slider - Swiper

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

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


  • Responsive design
  • Small and fast
  • Fully accessible
  • Supports any html elements, not only images
  • Supports Vertical/Horizontal animations and swipes
  • Cool transition effects: Fade, Flip, 3D Cube, 3D Coverflow, Parallax
  • Hash navigation
  • Grid layout
  • Image lazy load
  • Virtual Slides for better performance
  • Keyboard interactions
  • RTL layout
  • Works on iOS, Android and latest Desktop browsers
  • Available for Angular, React, Vue, and Svelte.

View more:

Table Of Contents:

Basic Usage (v7+):

1. Install the package with NPM.

$ npm i swiper --save

2. Import the Swiper and modules of your choice as an ES module into your project. All available modules:

  • a11y
  • autoplay
  • controller
  • effect-cards
  • effect-coverflow
  • effect-creative
  • effect-cube
  • effect-fade
  • effect-flip
  • free-mode
  • grid
  • hash-navigation
  • history
  • keyboard
  • lazy
  • manipulation
  • mousewheel
  • navigation
  • pagination
  • parallax
  • scrollbar
  • thumbs
  • virtual
  • zoom
// Core
import Swiper from 'swiper';
import 'swiper/css';

// With OPTIONAL modules
import Swiper, { Navigation, ... } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
Swiper.use([Navigation, ...]);

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

const swiper = new Swiper('.swiper', {
      // options here

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

<div class="swiper">
  <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>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
const swiper = new Swiper('.swiper', {
      pagination: {
        el: '.swiper-pagination',
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      scrollbar: {
        el: '.swiper-scrollbar',

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


v7.0.8 (2021-10-18)

  • bugfixes

v7.0.8 (2021-10-04)

  • virtual: improve behavior with cssMode

v7.0.7 (2021-09-29)

  • Bug Fixes

v7.0.6 (2021-09-20)

  • Bug Fixes
  • angular: enabled prop
  • angular: support data-swiper-autoplay

v7.0.5 (2021-09-10)

  • Bug Fixes

v7.0.4 (2021-09-09)

  • bugfix
  • pagination: more pagination bullet CSS variables

v7.0.3 (2021-09-06)

  • bugfix

v7.0.1 (2021-08-26)

  • autoplay: add missing .start() method
  • pagination: check for bullets before destroy

v7.0.0 (2021-08-25)

  • Refactor and Bug Fixes

v6.8.2 (2021-08-20)

  • Bug Fixes

v6.8.1 (2021-08-06)

  • Bug Fixes
  • pagination: hide 1 dot pagination

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


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