Menu
» »Unlabelled » Best jQuery Touch Enabled Sliders


Create your web site with Touch support banners - web design sri lanka



Swiper - is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works great on Android, Windows Phone 8 and modern Desktop browsers. Swiper is created by

web: http://www.idangero.us/sliders/swiper/

Usage

1. Download the latest version of Swiper from GitHub here.
2. Add to HEAD Swiper's CSS and JS:
<head>
  ....
  <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
  <script defer src="path_to_js/idangerous.swiper-1.x.min.js"></script>
  ....
</head>
3. Use the following HTML layout: 
<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. Open idangerous.swiper.css and set the Swiper's width and height (in the end of the file):
...
/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
 width: 500px;
 height: 200px;
}
5. Initialize Swiper on document ready (or when window is loaded):
<script type="text/javascript">
/*======
Use document ready or window load events
For example:
With jQuery: $(function() { ...code here... })
Or window.onload = function() { ...code here ...}
Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
=======*/

window.onload = function() {
 var mySwiper = new Swiper('.swiper-container',options);  
}

/*
Or with jQuery/Zepto
*/
$(function(){
 var mySwiper = $('.swiper-container').swiper(options);
})

</script>

API

new Swiper(container, options)

  • container - string, required. CSS selector of Swiper's container. In the HTML code above it should be equal to '.swiper-container'
  • options - object, optional. Swiper parameters, see bellow
OR:
  • container - HTML Element, required. HTML Element that is a Swiper's container. In the HTML code above it could be equal to document.querySelector('.swiper-container') or (with jQuery) to $('.swiper-container')[0]. New in 1.8.5
  • options - object, optional. Swiper parameters, see bellow

Usage:

var mySwiper = new Swiper('.swiper-container', { 
 speed:750, 
 mode:'vertical'
})
Returns the object with couple of useful functions and methods:
  • mySwiper.swipeNext() - run transition to next slide
  • mySwiper.swipePrev() - run transition to previous slide
  • mySwiper.swipeTo(index, speed, runCallbacks) - run transition to the slide with index number equal to 'index' parameter for the speed equal to 'speed' parameter. You can set 'runCallbacks' to false (by default it is 'true') and transition will not produce onSlideChange callback functions.
  • mySwiper.isSupportTouch() - returns true if browser supports Touch events Deprecated! Use .support
  • mySwiper.isSupport3D() - returns true if browser supports CSS3 3D transforms Deprecated! Use .support
  • mySwiper.support.touch - returns "true" if browser supports touch events
  • mySwiper.support.threeD - returns "true" if browser supports CSS3 3D transforms
  • mySwiper.activeSlide - returns the index number of currently active slide
  • mySwiper.currentSlide() - returns the currently active slide (slide instance, HTMLElement) New in 1.8
  • mySwiper.clickedSlideIndex - returns the index number of touched/clicked slide. For use only with "onSlideTouch" and "onSlideClick" callbacks. New in 1.8
  • mySwiper.clickedSlide - returns the touched/clicked slide (slide instance, HTMLElement). For use only with "onSlideTouch" and "onSlideClick" callbacks. New in 1.8
  • mySwiper.activeSlide - returns the index number of currently active slide
  • mySwiper.startAutoPlay() - start auto play. It may be useful for custom "Play" and "Pause" buttons.
  • mySwiper.stopAutoPlay() - stop auto play. It may be useful for custom "Play" and "Pause" buttons.
  • mySwiper.stopAutoPlay() - stop auto play. It may be useful for custom "Play" and "Pause" buttons.
  • mySwiper.destroy(removeResizeEvent) - will remove all attached event listeners (resize event on window (if removeResizeEvent not equal to 'false') , touch events on wrapper, and mouse events on document). Useful if you add/remove swiper(s) to document dynamically to release browser's memory.
  • mySwiper.resizeFix() - call this function after you change Swiper's size without resizing of window.
  • mySwiper.reInit() - reintialize Swiper. Useful to use after you dynamically add/remove slides. New in 1.8
  • mySwiper.width - returns width of Swiper container
  • mySwiper.height - returns height of Swiper container
  • mySwiper.isTouched - returns 'true' while 'touching' the slider
  • mySwiper.positions - returns object that contains x and y position of wrapper
  • mySwiper.touches - returns object with information about touches
  • mySwiper.params - access to object with parameters passed on initialization

Options

Swiper support the following list of parameters on initialization:
ParameterTypeDefault ValueExampleDescription
speednumber300600duration of animation between slides (in ms)
autoPlaynumber5000-delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
modestring'horizontal''vertical'slides will be positioned horizontally (for horizontal swipes) or vertically (for vertical swipes)
freeModebooleanfalsetrueIf 'true' then slides will not have fixed positions
freeModeFluidbooleanfalsetrueIf true, then if you release the slide it will keep moving for a while
rationumber10.8Touch ratio
loopbooleanfalsetrueSet to true to enable loop mode.
slidesPerSlidenumber12Set numbers of slides you want to display at the same time on slider's container for carousel mode.
disableAutoResizebooleanfalsetrueSet to true if you want to disable automatic slider resize on window resize.
resistancebooleantruefalseSet to false if you want to disable resistant bounds.
scrollContainerbooleanfalsetrueSet to true if you want to use Swiper like a scrollable area.
preventLinksbooleantruefalseWhen enabled Swiper will prevent clicks on links (<a>) while slider is "touching".
initialSlidenumber20Index number of initial slide.
New in 1.8
Touch/mouse interactions
simulateTouchbooleantruefalseIf true, Swiper will accept mouse events like touch events (click and drag to change slides)
onlyExternalbooleanfalsetrueIf true, then the only way to switch the slide is use of external API functions like swipeRight or swipeLeft. Useful for tabs like in example above
followFingerbooleantruefalseIf false, then slider will be animated only when you release it, it will not move while you hold your finger on it
grabCursorbooleanfalsetrueThis option may a little improve usability of your swiper users. If true, user will see the "grab" cursor when hover on Swiper. New in 1.8.8
Navigation
keyboardControlbooleanfalsetrueSet to true to enable navigation through slides using keyboard right and left (for horizontal mode), top and borrom (for vertical mode) keyboard arrows New in 1.8.5
mousewheelControlbooleanfalsetrueSet to true to enable navigation through slides using mouse wheel.New in 1.8.5
Pagination
paginationstring-'.my-pagination'CSS selector of the container with pagination.
createPaginationbooleantruefalseif true, then Swiper will create as many SPAN elements as many slides in slider. All these spans will be created in the container specified in the "pagination" parameter. Every SPAN will have a 'swiper-pagination-switch' class, active span (of the current slide) will have a 'swiper-active-switch' class. They will be useful for styling them.
Name Space
wrapperClassstring'swiper-wrapper''my-wrapper'CSS class of the Swiper's wrapper. See the HTML demo above
slideClassstring'swiper-slide''my-slide'CSS class of the Swiper's slide. See the HTML demo above
paginationClassstring'swiper-pagination-switch''my-switch'CSS class of the Swiper's pagination switch
paginationActiveClassstring'swiper-active-switch''my-active-switch'CSS class of the Swiper's active pagination switch
Callbacks
onTouchStartfunction-function(){ do something }Callback function, will be executed when you touch the slider
onTouchMovefunction-function(){ do something }Callback function, will be executed when you touch and move finger over the slider
onTouchEndfunction-function(){ do something }Callback function, will be executed when you release the slider
onSlideResetfunction-function(){ do something }Callback function, will be executed when you release the slide and it going to be reseted to currently active slide. Don't work with freeMode.
onSlideChangeStartfunction-function(){ do something }Callback function, will be executed in the beginning of animation to other slide (next or previous). Don't work with freeMode.
onSlideChangeEndfunction-function(){ do something }Callback function, will be executed after animation to other slide (next or previous). Don't work with freeMode.
onSlideClickfunction-function(){ do something }Callback function, will be executed after you click any slide
New in 1.8
onSlideTouchfunction-function(){ do something }Callback function, will be executed right after you touch any slide. Almost the same as onTouchStart, but also returns .clickedSlide and .clikedSlideIndex values.
New in 1.8

Example

<script type="text/javascript">
$(document).ready(function(){
  var mySwiper = $('.swiper-container').swiper({
    mode : 'vertical', //Switch to vertical mode
    speed : 500, //Set animation duration to 500ms
    freeMode : true, //Enable free mode
    freeModeFluid : true, //Enable 'fluid' free mode
    onTouchStart : function() {
      //Do something when you touch the slide
      alert('OMG you touch the slide!') 
    }
  }
})
</script>

Slides API

Since version 1.8 Swiper comes with powerful Slides API that is intended for dynamic slides creation/deletion/manupilation.

Slide Instance

Swiper's Slide instance is the simple HTMLElement but extended with usefull methods
According to the following example mySwiper variable contains Swiper's object with options and methods
<script type="text/javascript">
$(document).ready(function(){
  var mySwiper = $('.swiper-container').swiper({
    mode : 'vertical', //Switch to vertical mode
    speed : 500, //Set animation duration to 500ms
    freeMode : true, //Enable free mode
    freeModeFluid : true, //Enable 'fluid' free mode
    onTouchStart : function() {
      //Do something when you touch the slide
      alert('OMG you touch the slide!') 
    }
  }
})
</script>
You can create swiper's slide instance by calling:
mySwiper.createSlide(html, slideClassList, element) where:
  • html (string, required) - inner HTML of created slide
  • slideClassList (string, optional) - "class" attribute of created slide. By default equal to "slideClass" option which by default equal to "swiper-slide"
  • element (string, optional) - html tag of created slide, by default equal to "div"
var mySwiper = $('.swiper-container').swiper({...some options...})

//Create new instance of slide:

var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
// This will generate the following HTML slide: '<div class="swiper-slide"> <p>Here is my new slide</p> </div>'

var newSlide = mySwiper.createSlide('<p>Hello</p>', 'swiper-slide red-slide', 'span');
// This will generate the following HTML slide: '<span class="swiper-slide red-slide"> <p>Hello</p> </span>'

After that "newSlide" variable contains just created new instance of Slide, but at the moment it still in the memory, not inside of slider. To add it to slider we can use some of the following chainable methods available on swiper's Slide instance:
  • newSlide.append() - add new slide as the last slide of slider. Returns Slide instance
  • newSlide.prepend() - add new slide as the first slide of slider before other slides. Returns Slide instance
  • newSlide.remove() - remove slide
  • newSlide.insertAfter(index) [index - number] - insert new slide right after the slide with index number equal to index. Returns Slide instance
  • newSlide.clone() - clone slide to new slide instance that you can append/prepend/etc. Returns new cloned Slide instance
//Examples

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

//Create new instance of slide:
var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
newSlide.append() // - new slide will be added as the last slide of slider after all existing slides

var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
newSlide.prepend() // - new slide will be added as the first slide of slider before all existing slides

//Clone Slide and append
var clonedSlide = newSlide.clone()
clonedSlide.append()

//Crazy Chaining
var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
newSlide.prepend().clone().append().clone().insertAfter(2) // - new slide will be added as the first slide of slider before all existing slides, then cloned to new slide that will be added as the last slide of slider after all existing slides, then cloned again to new slide that will be added after the slide with index number equal to 2
There are also several helpers methods:
  • slide.html(innerHTML) [innerHTML - string] - works similar to jQuery/Zepto .html() function. If you specify innerHTML then it will replace slide's inner html and function will return slide instance. If innerHTML is not specified then this function will return slide's inner html.
  • slide.index() - returns index number of slide
  • slide.isActive() - returns true if slide is currently active
  • slide.setData(name,value) [name - string] - function to store data in slide. You can store any type of variables - arrays, objects, numbers, strings, etc.
  • slide.getData(name) [name - string] returns value of variable stored with .setData()
  • slide.data(name,value) [name - string, value - string] - save string values in data-[name] attributes.
  • slide.data(name) [name - string] - returns value of slide's data-[name] attribute.
//Examples

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

//Create new instance of slide:
var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
newSlide.append().clone().html('<p>New HTML</p>').prepend() 
// new slide will be added as the last slide of slider after all existing slides, then cloned to new slide with other inner html and that will be added as a first slide

var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
alert(newSlide.html()) // -> <p>Here is my new slide</p>

Store/Get data:
newSlide.prepend().setData('apples',['iMac', 'MacBook Pro', 'iPhone', 'iPad'])
newSlide.getData('apples') // -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad']

newSlide.data('apple','iPad');
newSlide.data('apple') // ->'iPad'

Swiper Slides

Ok, let see now on new swiper methods on how to manage existing slides or add/remove slides from "other slide":
  • mySwiper.slides - array with slides (slides instances)
  • mySwiper.appendSlide(innerHTML, slideClassList, element) - create new slide and insert it as the last slide of slider. Returns Slide instance. Where:
    • html (string, required) - inner HTML of created slide
    • slideClassList (string, optional) - "class" attribute of created slide. By default equal to "slideClass" option which by default equal to "swiper-slide"
    • element (string, optional) - html tag of created slide, by default equal to "div"
  • mySwiper.appendSlide(slideInstance) [slideInstance - HTMLElement] - insert slideInstance as the last slide of slider. Returns Slide instance.
  • mySwiper.prependSlide(innerHTML, slideClassList, element) - create new slide and insert it as the first slide of slider. Returns Slide instance.
  • mySwiper.prependSlide(slideInstance) [slideInstance - HTMLElement] - insert slideInstance as the first slide of slider. Returns Slide instance.
  • mySwiper.insertSlideAfter(index, innerHTML, slideClassList, element) - create new slide and insert it after the slide with index number equal to index. Returns Slide instance.
  • mySwiper.insertSlideAfter(index, slideInstance) - insert slideInstance after the slide with index number equal to index. Returns Slide instance.
  • mySwiper.removeSlide(index) [index - number] - remove slide with index number equal to index
  • mySwiper.removeLastSlide() - remove last slide
  • mySwiper.removeAllSlides() - remove all slider slides
  • mySwiper.getSlide(index) [index - number] - returns slide (slide instance) with the index number equal to index
  • mySwiper.getLastSlide() - returns last slider slide (slide instance)
  • mySwiper.getFirstSlide() - returns first slider slide (slide instance)
//Examples:

//Create new slide and append
mySwiper.appendSlide('Hello World')
//OR:
var newSlide = mySwiper.createSlide('Hello World')
mySwiper.appendSlide(newSlide)
//OR:
mySwiper.appendSlide( mySwiper.createSlide('Hello World') )

//Clone first slide and insert to the end
mySwiper.getFirstSlide().clone().append();
//OR:
mySwiper.appendSlide( mySwiper.getSlide(0).clone() )

//Clone second slide with other HTML and insert to the end
mySwiper.getSlide(1).clone().html('Hello New World!').append();

//Remove Last slide
mySwiper.removeLastSlide()

//Remove second slide
mySwiper.removeSlide(1)

//Trick: Swap first and second slides
mySwiper.getSlide(0).insertAfter(1)

//Trick: Move first slide to last postion
mySwiper.getFirstSlide().append()

//Number of slides in slider
alert(mySwiper.slides.length)

//Change HTML of each slide
for (var i = 0; i < mySwiper.slides.length; i++) {
  var slide = mySwiper.slides[i]
  slide.html('<p> My index number is '+i+' </p>')
}

Important Notes

When using functions that change number of slides (like append, prepend, remove, etc.), .reInit() function will be called and number of slides will be recalculated automatically. So it is highly don't recommended to add/remove slides dynamically using "slides.length" in "for" loop becausie it may produce infinite loop.
Slides API temporary is not intended to be used with "loop" mode.
Posted by Sri Lanka Best One
at 11:58 PM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top