jQuery Swiper

This code has not been changed since 2012 and has been used in only one project. I just keep it around for future reference, use at your own risk.

Slideshow for mobile à la Facebook.

Plugin only tested on Chrome & Safari for iOS6.

• License: MIT License
• Author: Tim Petricola - FrontFoot

Usage

HTML:

<div id="slider">
  <ul>
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
  </ul>
</div>

Javascript:

$('#slider').swiper({ auto: 1000 })

Options

{
  start: 0, // Index of the slide to show by default
  speed: 300, // Speed of slider
  auto: 0, // Delay for automatic slider (0 to disable)
  previewWidth: 0, // Size of previews on left and right of the slider
  interspace: 0, // Space between slides
  callback: function(index, $slide) {} // Runs when a new slide is shown
}

Methods

prev

Go to previous slide.

  $('.slider').swiper('prev')

next

Go to next slide.

  $('.slider').swiper('next')

stop

Stop the automatic slider.

  $('.slider').swiper('stop')

resume

Resume the automatic slider.

  $('.slider').swiper('resume')

goto

Go to the slide at the specified index.

  $('.slider').swiper('goto', 2) // Go to slide at index 2

position

Return the position of the current slide. If a second argument is passed, go to this slide. (similar to goto)

  $('.slider').swiper('position') // Return index
  $('.slider').swiper('position', 2) // Go to slide at index 2 (similar to .goto(2))

Todo

• Compability tests
• Compability with Zepto
• Add keyboard support for desktop
• Tests