Simple Mobile-first jQuery Image Slider Plugin - HSSlider

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.