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:
- 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
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
I want to try your plugins, but i cannot download it, the download button problem? please let me know if its working.
Tks
Alexius
Alexius, we've changed the link so it should allow downloading from GitHub. Let us know if there are any other issues.
Can't make this work with jquery mobile. Any suggestions
Jose, may we get an example of the issue found? You may submit using our "Ask a Question" form. Thanks!
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?
Nice one! Will have a play with it for sure.
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
This doesn't work on Internet Explorer on Windows Phone 7.5. Just tried it on a Nokia Lumia 610.
I am using touchslider for mobile app. I am facing one problem. When i load the page using ajax, slider is not woking.
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!