Responsive and Flexible Mobile Touch Slider - Swiper

Responsive and Flexible Mobile Touch Slider - Swiper
File Size: 476 KB
Views Total:
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:

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

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

// Update swiper
mySwiper.update()

// 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);  Destroy slider instance and detach all events listeners, where

// 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(); Remove all slides

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

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

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

Changelog:

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.