Flexible Mobile-friendly jQuery Slider Plugin - hiSlider.js
File Size: | 14 KB |
---|---|
Views Total: | 2981 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

hiSlider.js is a simple, responsive, mobile-friendly jQuery image slider plugin that supports flexible layout, touch events and comes with lots of customization options.
How to use it:
1. Add jQuery JavaScript library and the jQuery hiSlider plugin's files to the webpages.
<link rel="stylesheet" href="css/jquery.hiSlider.min.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.hiSlider.min.js"></script>
2. Create a list of images for the slider.
<ul class="hiSlider demo"> <li data-title="1" class="hiSlider-item"> <img src="1.jpg" alt="1"> </li> <li data-title="2" class="hiSlider-item"> <img src="2.jpg" alt="2"> </li> <li data-title="3" class="hiSlider-item"> <img src="3.jpg" alt="3"> </li> <li data-title="4" class="hiSlider-item"> <img src="4.jpg" alt="4"> </li> <li data-title="5" class="hiSlider-item"> <img src="5.jpg" alt="5"> </li> </ul>
3. Initialize the plugin to convert the image list into a basic image slider with default options.
$('.demo').hiSlider();
4. All configuration options with default values.
$('.demo').hiSlider({ // start index startSlide: 0, // item selector item: '.hiSlider-item', // fullscreen mode isFullScreen: false, // flexible layout isFlexible: false, // touch events support isSupportTouch: '__proto__' in {}, // enable pagination isShowPage: true, // enable title bar isShowTitle: true, // title attribute titleAttr: 'data-title', // enable navigation isShowControls: true, // autoplay isAuto: true, // autoplay interval intervalTime: 5000, // animation speed affectTime: 300, // fade || move mode: 'move', // left || top direction: 'left', // callbacks onSwipeStart: $.noop, onSwipeMove: $.noop, minSwipeLength: 30, onSwipeCancel: $.noop, onSwipeEnd: $.noop, onSwipeLeft: $.noop, onSwipeRight: $.noop, onSwipeTop: $.noop, onSwipeBottom: $.noop, onInited: $.noop, onMoveBefore: $.noop, onMoveAfter: $.noop, onSelected: $.noop });
Change log:
2016-03-02
- bugfix
This awesome jQuery plugin is developed by hishion. For more Advanced Usages, please check the demo page or visit the official website.