Customizable Image Slider Widget For jQuery UI - HRImageSlideshow

File Size: 2.73 MB
Views Total: 2467
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
          <img src="" data-src="1.jpg">
          <img src="2.jpg">

4. Active the image slider.

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

5. Make it responsive.


6. Plugin's default options.

duration : "600",
animationInterval : "3000",
easing: "linear",
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.