Generic Mobile-friendly Slider Plugin with jQuery - touchSlider
File Size: | 12.2 KB |
---|---|
Views Total: | 9820 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
touchSlider is a simple, flexible jQuery plugin for creating a responsive, touch-enabled slider which supports any types of html elements.
Main features:
- Multiple items per one slide.
- Custom animations.
- Carousel mode.
- Supports both drag and touch swipe events.
- Auto rolls back to the first slide when you reach the last one.
- Auto resizes based on the child elements.
- Custom pagination and navigation.
See Also:
Basic usage:
1. Create a list of html elements and the wrap it into a DIV container.
<div id="touchSlider"> <ul> <li> Content 1 </li> <li> content 2 </li> <li> content 3 </li> ... </ul> </div>
2. Apply custom CSS classes to the slider.
#touchSlider { width: 100%; height: 150px; margin: 0 auto; background: #ccc; position: relative; overflow: hidden; } #touchSlider ul { width: 99999px; height: 150px; position: absolute; top: 0; left: 0; overflow: hidden; } #touchSlider ul li { float: left; width: 100%; height: 150px; background: #9C9; font-size: 14px; color: #fff; }
3. Load jQuery library and the jQuery touchSlider plugin at the end of the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="jquery.touchSlider.js"></script>
4. Load the jQuery.event.drag library for drag support on desktop.
<script src="//cdn.jsdelivr.net/jquery.event.drag/2.2/jquery.event.drag.min.js"></script>
5. Active the container slider with default options.
$("#touchSlider").touchSlider();
6. Add a slide counter and custom prev / next navigation arrows to the slider.
$("#touchSlider").touchSlider({ btn_prev : $("#touchSlider").next().find(".btn_prev"), btn_next : $("#touchSlider").next().find(".btn_next"), counter : function (e) { $("#count").html("current : " + e.current + ", total : " + e.total); } });
7. Config the plugin to allow more than 5 items in one slide.
$("#touchSlider").touchSlider({ view : 5, btn_prev : $("#touchSlider").next().find(".btn_prev"), btn_next : $("#touchSlider").next().find(".btn_next"), counter : function (e) { $("#count").html("current : " + e.current + ", total : " + e.total); } });
8. All the configuration options with default values.
$("#touchSlider").touchSlider({ // whether to use mouse useMouse: true, // or 'fade' mode: 'swipe' // infinite scroll roll: true, // flexible layout flexible: true, // auto resize resize: false, // custom controls btn_prev: null, btn_next: null, controls: true, // animation speed speed: 75, // how many items in one slide view: 1, // space between slides gap: 0, // distance to trigger the sliding range: 0.15, // show page controls paging: true, // init page page: 1, // slides pages sidePage: false, // enable CSS3 transitions transition: true, // callback initComplete: null, // autoplay settings autoplay: { enable: false, pauseHover: true, addHoverTarget: "", interval: 3500 }, // an object containing settings for different screens breakpoints: null, // called after init initComplete: null, // called after destroy destroyComplete: null // called after passing the slider counter: null, });
Changelog:
v1.6.10 (2020-09-17)
- Bugfix
v1.6.9 (2019-11-25)
- Bugfix
v1.6.8 (2019-10-06)
- Improved link handling.
v1.6.7 (2019-09-25)
- Improved link handling.
v1.6.6 (2019-09-05)
- Added more callbacks.
v1.6.4 (2019-08-07)
- Fixed touchmove position
v1.6.3 (2019-07-22)
- Fixed issues when there are no items
v1.6.2 (2019-07-18)
- Bugfixed
2019-06-18
- Apply aria-hidden attribute to hidden slides.
2019-05-27
- Bugfixed
2019-05-25
- Added fade mode option
2019-04-21
- Bugfix
2019-02-28
- Bugfix
2018-09-07
- Bugfix
2018-08-12
- v1.4.0: Fixed breakpoints
2018-04-09
- v1.3.2
2018-02-28
- Added 'useMouse' option.
2018-02-13
- Improvement.
2017-12-19
- Improve autoplay
2017-10-30
- JS update
2017-07-06
- JS update
2017-01-11
- Fixed animations.
2016-12-28
- Fixed for IE.
2016-12-16
- Fix mouse drag error in Chrome
2016-08-29
- JS update
2016-06-06
- v1.1.5
2016-02-16
- added autoplay play / pause functionalities.
2016-02-09
- bugfix
This awesome jQuery plugin is developed by dohoons. For more Advanced Usages, please check the demo page or visit the official website.