Customizable Image Slider Widget For jQuery UI - HRImageSlideshow
File Size: | 2.73 MB |
---|---|
Views Total: | 2416 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.