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

Features:

  • 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
$ 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="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<!-- OR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.esm.browser.min.js'
</script>

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>
    ...
  </div>
</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
mySwiper.updateAutoHeight(speed);

// Update swiper
mySwiper.update();

// Changes slider direction from horizontal to vertical and back.
mySwiper.changeDirection(direction);

// update size
mySwiper.updateSize() ;

// update slides
mySwiper.updateSlides();

// update progress
mySwiper.updateProgress();

// update classes
mySwiper.updateSlidesClasses();

// detach all event listeners
mySwiper.detachEvents();

// attach all event listeners
mySwiper.attachEvents();

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

// append new slides to the slider
mySwiper.appendSlide(slides);

// prepend new slides to the slider
mySwiper.prependSlide(slides);

// add new slides
mySwiper.addSlide(index, slides);

// remove a slide
mySwiper.removeSlide(slideIndex);

// remove all slides
mySwiper.removeAllSlides();

// set custom CSS transforms
mySwiper.setTranslate(translate);

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

// get the current transform value
mySwiper.getTranslate(); 

// add event listener
mySwiper.on(event, handler);

// that will be executed only once
mySwiper.once(event, handler);

// remove event listener for specified event
mySwiper.off(event, handler);

// remove all listeners
mySwiper.off(event);

// unset grab cursor
mySwiper.unsetGrabCursor();

// set grab cursor
mySwiper.setGrabCursor();

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.

mySwiper.params
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.slides
mySwiper.width
mySwiper.height
mySwiper.translate 
mySwiper.progress 
mySwiper.activeIndex  
mySwiper.realIndex  
mySwiper.previousIndex
mySwiper.isBeginning
mySwiper.isEnd
mySwiper.animating
mySwiper.touches
mySwiper.touches.startX
mySwiper.touches.startY
mySwiper.touches.currentX
mySwiper.touches.currentY
mySwiper.touches.diff
mySwiper.clickedIndex
mySwiper.clickedSlide
mySwiper.allowSlideNext
mySwiper.allowSlidePrev
mySwiper.allowTouchMove

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 -->
      </div>
      
      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the second slide goes here -->
      </div>
      
      <!--Third Slide-->
      <div class="swiper-slide">
        <!-- Any HTML content of the third slide goes here -->
      </div>
      <!--Etc..-->
  </div>
</div>

4. Initialize the swiper with optional settings.

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

Changelog:

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 zoom.in() 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.