touchSlider jQuery Plugin

touchSlider — is a free CSS accelerated jQuery plugin optimized for desktop and mobile browsers. It can be used for sliding images and content. Features are listed below:

touchSlider jQuery plugin on iPad and iPhone

  • Cross-browser support, desktop and mobile
  • CSS accelerated
  • Multipurpose options
  • Responsive layout
  • Ready for images and content
  • Callback functions support
Compatible with:
  • Apple iPad, iPhone and iPod Touch
  • Android Phones and Tablets
  • BlackBerry 6+
  • Windows Phone 7
  • Google Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Opera

The plugin detects if browser supports CSS transitions, resulting with 3 possible options for animation:

  • Automatic (3D CSS transition is used if detected)
  • JavaScript (jQuery methods will be used for animation)
  • No Animation (slider will work with no animation, useful for browsers with poor support of JavaScript like BlackBerry OS 5)

touchSlider has three available modes for sliding:

  • Fixed value scrolling. The value can be set in pixels or has percentage value relative to the available width.
  • Per item scrolling.
  • Automatic mode. When it automatically detects how many items can be placed within the available width.

Using callback functions you may build custom designed controls like previous/next slide, go particular slide by index, display current slide index and much more.

Parameters

name default example description
activeClass 'active' The class name which is added to the currently displayed item.
animation 'auto' Can be 'auto', 'js' or false. 'auto' enables CSS transitions when supported. Otherwise uses native jQuery animation. Use 'css' to force CSS transitions. 'js' value enables native jQuery animation.
box 'div.list' Selector of HTML element that contains items to slide.
center false When enabled it centers the current item in 'index' mode. Sets center position for the content in 'auto' and 'shift' modes.
debug false Displays debug info when enabled.
delta 40 The number of swiped pixels needed to switch to next item.
duration 500 The number of miliseconds required to slide items.
holder 'div.holder' Selector that specifies HTML element to be used as a viewport.
item 'div.item' Selector that detects items to slide.
lockScroll false Locks vertical scrolling when enabled. By default touchSlider allows vertical scrolling.
mode 'shift' Can be 'auto', 'index' or 'shift'. In 'auto' mode it automatically detects the number of items that fit to the current screen width. In 'index' mode it scrolls images one by one. In 'shift' mode it scrolls by limited number of pixels or % (80% of available width by default).
nextLink null 'a.next' Selector for 'next' button.
onChange null function(prev, curr) {...} Callback function called on switching to another item. Gets two params - previously displayed item and currenly displayed item.
onStart null function(){...} Callback function called on initializing.
prevLink null 'a.prev' Selector for 'prev' button.
shift '80%' The number of pixels or % for sliding step in 'shift' mode.
single false When enabled only one item is displayed in 'index' mode. Hides partially shown images in 'auto' mode.
touch true Enables or disables touch events support.

Usage Examples

  1. Basic layout, styles and scripts for touchSlider plugin
    1. Inclusion
    2. HTML
    3. CSS
    4. JavaScript
    5. Configuration
  2. Examples
    1. Gallery with Single Centered Item
    2. Gallery with Content
    3. Browsing Wide Objects
    4. Gallery with Focused Item
    5. Adding Prev/Next Buttons
    6. Adding Items Counter
    7. Adding Items Switcher by Index
    8. Using Automatic Mode
    9. Automatic Mode with Different Image Sizes

If you like this plugin and want it to be even better as well as to see new FREE mobile freebies from us, you are welcome to donate.

Comments

alexius's picture
alexius on January 15th, 2012

I want to try your plugins, but i cannot download it, the download button problem? please let me know if its working.

Tks
Alexius

MobilizeToday's picture
MobilizeToday on January 16th, 2012

Alexius, we've changed the link so it should allow downloading from GitHub. Let us know if there are any other issues.

Jose Carrillo's picture
Jose Carrillo on February 26th, 2012

Can't make this work with jquery mobile. Any suggestions

MobilizeToday's picture
MobilizeToday on February 27th, 2012

Jose, may we get an example of the issue found? You may submit using our "Ask a Question" form. Thanks!

Conrad's picture
Conrad on April 18th, 2012

Hi,
Great Jquery scroller! Though I want to add something:
On default i want to load 6 images. But when scrolled to the end of an scroller, i want to check (with ajax) if there are any more.
I found where i can set an action when the users hits the end, but the problem is to automatically move the slider to the new image or images...Can anyone help?

Ralph's picture
Ralph on May 12th, 2012

Nice one! Will have a play with it for sure.

Alex's picture
Alex on June 15th, 2012

Hi,

Thanks for suck a great slider, easy to integrate and put any content and swipe it.

I have some questions:
- How to start animation by timer, so for example it will change slides automatically with some delay?
- How to make it loop, from last slide to first one? I saw there shoul be update on February with that function and still cant find it.. is it so complicated, please give me a clue how to do it.

Thanks,
Aleksandr

Aalaap Ghag's picture
Aalaap Ghag on September 10th, 2012

This doesn't work on Internet Explorer on Windows Phone 7.5. Just tried it on a Nokia Lumia 610.

shiva's picture
shiva on September 17th, 2012

I am using touchslider for mobile app. I am facing one problem. When i load the page using ajax, slider is not woking.

Rebekkah's picture
Rebekkah on February 1st, 2013

This is brilliant! spent ages looking for a simple solution like this.
I'm currently working on tweaking the code to allow continuous scrolling. If you could offer any suggestions, I'd be extremely grateful.

Thanks!

Would you like to express yourself?