Responsive and Flexible Mobile Touch Slider - Swiper

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

Swiper is a javascript library for implement Responsive and Flexible Mobile Touch Sliders on your mobile websites and Apps. 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)). Please take a look at the demo page to see it in action.

Features:

  • Responsive design
  • Small and fast
  • Supports any html elements, not only images
  • Supports Vertical/Horizontal animations and swipes
  • Works on iOS, Android and latest Desktop browsers

Basic Usage:

1. Include jQuery library and  Swiper.js on your webpage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script  src="js/idangerous.swiper-1.9.1.min.js"></script>

2. Include required swiper.js on the page

<link rel="stylesheet" href="css/idangerous.swiper.css">

3. Create the html

<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. Call the plugin with options and done.

var mySwiper = $('.swiper-container').swiper({

    mode:'horizontal',
    loop: true

});

5. All possible plugin options.

direction: 'horizontal',
touchEventsTarget: 'container',
initialSlide: 0,
speed: 300,
// autoplay
autoplay: false,
autoplayDisableOnInteraction: true,
autoplayStopOnLast: false,
// To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView).
iOSEdgeSwipeDetection: false,
iOSEdgeSwipeThreshold: 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'
coverflow: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows : true
},
flip: {
    slideShadows : true,
    limitRotation: true
},
cube: {
    slideShadows: true,
    shadow: true,
    shadowOffset: 20,
    shadowScale: 0.94
},
fade: {
    crossFade: false
},
// Parallax
parallax: false,
// Zoom
zoom: false,
zoomMax: 3,
zoomMin: 1,
zoomToggle: true,
// Scrollbar
scrollbar: null,
scrollbarHide: true,
scrollbarDraggable: false,
scrollbarSnapOnRelease: false,
// Keyboard Mousewheel
keyboardControl: false,
mousewheelControl: false,
mousewheelReleaseOnEdges: false,
mousewheelInvert: false,
mousewheelForceToAxis: false,
mousewheelSensitivity: 1,
mousewheelEventsTarged: 'container',
// Hash Navigation
hashnav: false,
hashnavWatchState: false,
// History
history: false,
// Commong Nav State
replaceState: false,
// Breakpoints
breakpoints: undefined,
// Slides grid
spaceBetween: 0,
slidesPerView: 1,
slidesPerColumn: 1,
slidesPerColumnFill: 'column',
slidesPerGroup: 1,
centeredSlides: false,
slidesOffsetBefore: 0, // in px
slidesOffsetAfter: 0, // in px
// Round length
roundLengths: false,
// Touches
touchRatio: 1,
touchAngle: 45,
simulateTouch: true,
shortSwipes: true,
longSwipes: true,
longSwipesRatio: 0.5,
longSwipesMs: 300,
followFinger: true,
onlyExternal: false,
threshold: 0,
touchMoveStopPropagation: true,
touchReleaseOnEdges: false,
// Unique Navigation Elements
uniqueNavElements: true,
// Pagination
pagination: null,
paginationElement: 'span',
paginationClickable: false,
paginationHide: false,
paginationBulletRender: null,
paginationProgressRender: null,
paginationFractionRender: null,
paginationCustomRender: null,
paginationType: 'bullets', // 'bullets' or 'progress' or 'fraction' or 'custom'
// Resistance
resistance: true,
resistanceRatio: 0.85,
// Next/prev buttons
nextButton: null,
prevButton: null,
// Progress
watchSlidesProgress: false,
watchSlidesVisibility: false,
// Cursor
grabCursor: false,
// Clicks
preventClicks: true,
preventClicksPropagation: true,
slideToClickedSlide: false,
// Lazy Loading
lazyLoading: false,
lazyLoadingInPrevNext: false,
lazyLoadingInPrevNextAmount: 1,
lazyLoadingOnTransitionStart: false,
// Images
preloadImages: true,
updateOnImagesReady: true,
// loop
loop: false,
loopAdditionalSlides: 0,
loopedSlides: null,
// Control
control: undefined,
controlInverse: false,
controlBy: 'slide', //or 'container'
normalizeSlideIndex: true,
// Swiping/no swiping
allowSwipeToPrev: true,
allowSwipeToNext: true,
swipeHandler: null, //'.swipe-handler',
noSwiping: true,
noSwipingClass: 'swiper-no-swiping',
// Passive Listeners
passiveListeners: true,
// NS
containerModifierClass: 'swiper-container-', // NEW
slideClass: 'swiper-slide',
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',
bulletClass: 'swiper-pagination-bullet',
bulletActiveClass: 'swiper-pagination-bullet-active',
buttonDisabledClass: 'swiper-button-disabled',
paginationCurrentClass: 'swiper-pagination-current',
paginationTotalClass: 'swiper-pagination-total',
paginationHiddenClass: 'swiper-pagination-hidden',
paginationProgressbarClass: 'swiper-pagination-progressbar',
paginationClickableClass: 'swiper-pagination-clickable', // NEW
paginationModifierClass: 'swiper-pagination-', // NEW
lazyLoadingClass: 'swiper-lazy',
lazyStatusLoadingClass: 'swiper-lazy-loading',
lazyStatusLoadedClass: 'swiper-lazy-loaded',
lazyPreloaderClass: 'swiper-lazy-preloader',
notificationClass: 'swiper-notification',
preloaderClass: 'preloader',
zoomContainerClass: 'swiper-zoom-container',

// Observer
observer: false,
observeParents: false,
// Accessibility
a11y: false,
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide',
firstSlideMessage: 'This is the first slide',
lastSlideMessage: 'This is the last slide',
paginationBulletMessage: 'Go to slide {{index}}',
// Callbacks
runCallbacksOnInit: true
/*
Callbacks:
onInit: function (swiper)
onDestroy: function (swiper)
onBeforeResize: function (swiper)
onAfterResize: function (swiper)
onClick: function (swiper, e)
onTap: function (swiper, e)
onDoubleTap: function (swiper, e)
onSliderMove: function (swiper, e)
onSlideChangeStart: function (swiper)
onSlideChangeEnd: function (swiper)
onTransitionStart: function (swiper)
onTransitionEnd: function (swiper)
onImagesReady: function (swiper)
onProgress: function (swiper, progress)
onTouchStart: function (swiper, e)
onTouchMove: function (swiper, e)
onTouchMoveOpposite: function (swiper, e)
onTouchEnd: function (swiper, e)
onReachBeginning: function (swiper)
onReachEnd: function (swiper)
onSetTransition: function (swiper, duration)
onSetTranslate: function (swiper, translate)
onAutoplayStart: function (swiper)
onAutoplayStop: function (swiper),
onLazyImageLoad: function (swiper, slide, image)
onLazyImageReady: function (swiper, slide, image)
onKeyPress: function (swiper, keyCode)
*/

Change log:

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.