This time I will share jQuery Plugin and tutorial about Customizable Image Slider Widget For jQuery UI – HRImageSlideshow, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery-ui.min.js"></script> |
2. Load the jQuery HRImageSlideshow plugin’s files in the html page.
1 |
<link rel="stylesheet" href="/path/to/imageSlideshow.css"> |
2 |
<script src="/path/to/imageSlideshow.js"></script> |
3. Add a list of images to the slider using either data-src or src attribute.
01 |
<div class="imageSlideshow"> |
02 |
<ul class="slideshow-content"> |
04 |
<img src="" data-src="1.jpg"> |
4. Active the image slider.
1 |
var slideshow = $(".imageSlideshow").imageSlideshow({ |
5. Make it responsive.
6. Plugin’s default options.
02 |
animationInterval : "3000", |
08 |
automaticSlideshow : false, |
10 |
after : function(index) {}, |
11 |
carouselLoaded : function() {} |
This awesome jQuery plugin is developed by hemkaran. For more Advanced Usages, please check the demo page or visit the official website.
