Customizable Image Slider Widget For jQuery UI - HRImageSlideshow

HRImageSlideshow is a jQuery & jQuery UI widget used to create a simple, responsive, highly customizable image slider / slideshow with easing and keyboard support.

How to use it:

1. Load the needed jQuery and jQuery UI in the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the jQuery HRImageSlideshow plugin's files in the html page.

<link rel="stylesheet" href="/path/to/imageSlideshow.css">
<script src="/path/to/imageSlideshow.js"></script>

3. Add a list of images to the slider using either data-src or src attribute.

<div class="imageSlideshow">
  <ul class="slideshow-content">
      <li>
          <img src="" data-src="1.jpg">
      </li>
      <li>
          <img src="2.jpg">
      </li>
      ...
  </ul>
</div>

4. Active the image slider.

var slideshow = $(".imageSlideshow").imageSlideshow({
    /* OPTIONS HERE */
});

5. Make it responsive.

slideshow.imageSlideshow('watchResponsiveness');

6. Plugin's default options.

duration : "600",
animationInterval : "3000",
easing: "linear",
controlNav:true,
directionNav:true,
startAt:"1",
keyboardNavigation : true,
automaticSlideshow : false,
fitToHeight : false,
after : function(index) {},
carouselLoaded : function() {}

---

This awesome jQuery plugin is developed by hemkaran. For more Advanced Usages, please check the demo page or visit the official website.