TouchSlider jQuery Plugin - Mobile | Tablet | Desktop browsers touch slider
As part of ongoing development of the MobilizeToday platform widgets, we'd like to share our touch slider jQuery plugin that works across different mobile/tablet browsers as well as desktop ones. Announcement blog post.
Three animation options:
- Automatic (3D CSS transition is used if detected)
Three sliding modes:
- Fixed value scrolling: the value can be set in pixels or has percentage value relative to the available width
- Per item scrolling: item by item scrolling
- Automatic mode: automatically detects how many items can be placed within the available width. See example below
Using callback functions you may build custom designed controls like:
- Previous/next slide
- Navigate to particular slide by index
- Display current slide index
- and so on ...
How to use
Include the jquery and touchslider scripts to your
Add below HTML structure with relevant image URLs:
<div class="holder"> <div class="list"> <div class="item"><div class="ibox"><img src="assets/tmb1.jpg" alt="" /></div></div> <div class="item"><div class="ibox"><img src="assets/tmb2.jpg" alt="" /></div></div> <div class="item"><div class="ibox"><img src="assets/tmb3.jpg" alt="" /></div></div> </div> </div>
See live demo, usage examples and documentation on http://www.mobilizetoday.com/freebies/touchslider
TouchSlider has been tested and compatible with:
- iOS (iPhone, iPad, iPod Touch)
- Android (all versions)
- BlackBerry OS 6 (Torch)
- WebOS 2 (Palm Pre/Pixi)
- Desktop browsers
Our future plans on improving this plugin include:
- Adding autoscroll option that allows automatically scroll content when it’s loaded.
- Adding speed acceleration for touch events.
Feel free to give us your feedback on what options you’d like to see in the new version of TouchSlider plugin. Your feedback/bugs (if any) also appreciated. Don’t forget to provide us with screenshots.
Enjoy using MobilizeToday TouchSlider plugin in your mobile web projects!