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.
- 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 the browsers with limited support of JavaScript like BlackBerry OS 5)
- 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
- Previous/next slide
- Navigate to particular slide by index
- Display current slide index
- and so on ...
Include the jquery and touchslider scripts to your <head> tag:
<script type="text/javascript" src="/path/jquery-1.6.2.min.js"/>
<script type="text/javascript" src="/path/jquery.touchslider-1.0.js"/>
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!