Simple Mobile-first jQuery Image Slider Plugin - HSSlider
File Size: | 8.14 KB |
---|---|
Views Total: | 625 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
HSSlider is a simple jQuery plugin used for creating a responsive, horizontal, automatic image slider that supports touch swipe events just like the iOS UIScrollView.
How to use it:
1. Load jQuery library and the jQuery HSSlider plugin's script at the end of the document.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="js/hsslider.js"></script>
2. Insert a list of images into the image slider.
<ul class="slider"> <li> <a href="#"><img src="1.jpg"></a> </li> <li> <a href="#"><img src="2.jpg"></a> </li> <li> <a href="#"><img src="3.jpg"></a> </li> <li> <a href="#"><img src="4.jpg"></a> </li> <li> <a href="#"><img src="5.jpg"></a> </li> ... </ul>
3. Call the plugin on the html list and done.
$(".slider").hsslider();
4. The required CSS styles.
.slider { position: absolute; overflow: hidden; z-index: 500; display: none } .slider li { float: left; display: inline; } .slider li img { display: block; width: 100%; height: 100% }
5. Config the image slider by passing the following settings to the hsslider()
function.
$(".slider").hsslider({ // auto play autoplay:true, // transition delay dealy:5000, // callback onComplete compleation: null, // aspect ratio // 16:9 aspect_numerator: 16, aspect_denominator: 9 });
This awesome jQuery plugin is developed by cnthinkcode. For more Advanced Usages, please check the demo page or visit the official website.