Easy Customizable Slider / Carousel Plugin With jQuery - H Slider

H Slider is a jQuery plugin that lets you create a fully configurable image carousel / gallery with an auto scrolling thumbnail navigation.

Key features:

• Auto slide on page load.
• Slide or fade transition effects.
• Dynamically adds images to the carousel via JavaScript.
• You can specify any number of slides in current view.
• Thumbnail navigation that auto scrolls as you slide between images.
• Custom slider controls.
• Callback functions supported.

How to use it:

1. To get started, you need to load jQuery library and the jQuery H Slider plugin's files in the html page as follows:

<link rel="stylesheet" href="style/hslider.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/hslider.min.js"></script>

2. The basic html structure for the slider.

<div class='hslider'>
  <ul class="hslider-parent-container">
    <li class="hslide selected">
      <div class="parent-container">
        <img src="img/1.jpg">
      </div>
    </li>
    <li class="hslide">
      <div class="parent-container">
        <img src="img/2.jpg">
      </div>
    </li>
    <li class="hslide">
      <div class="parent-container">
        <img src="img/3.jpg">
      </div>
    </li>
  </ul>
</div>

3. Call the function to initialize the slider with default options.

$('.hslider').hslider();

4. All default plugin options.

//sliding pauses for slideSpeed value, in milliseconds
slideSpeed: 3000, 

//sliding transition speed at which the transition happens, in milliseconds
transitionSpeed: 500, 

//set as true if sliding is to begin on load
autoSlide: true, 

//set a value to show the number of slides in current view
slidesOnView: 2, 

//shift the number of slides per carousel shift
shiftSlides: 2, 

// direction of the scroll to happen
scrollDirection: 'right', 

//set the height as required
height: 350, 

//set the width as required
width: 600, 

// current slide index
currentSlide: 0, 

//currently animations added - ["fade", "slide"]
transitionStyle: 'slide', 

//set true if you pass the images src through an array for hslider to build, 
//if false, picks the ul-li structure from the parentTagClass info provided
imagesArrayProvided: false, 

//array of images to be rendered in the container
imagesArray: [], 

//set true if thumbnails are required
showThumbnails: false, 

//set as true if a section dedicated to captions is required
captionNeeded: false, 

//array of strings of HTML  or normal text to be added as caption
captionContentList: [], 

//set as true if visual controls for next and previous slides are required
controls: true, 

//pause slide when mouse hover occurs on the slide
pauseSlideOnHover: true, 

//set as true if you need a button to pause the slider until required
pauseButtonNeeded: true, 

//the tag used as the pause button element,
pausePlayButtonElement: 'a', 

//set the text value as required when pausing is required
pauseButtonText: 'Pause', 

//set the text value as required when playing is required
playButtonText: 'Play', 

//containers
parentTag: 'div', 
parentTagClass: 'parent-container', 
captionContainerClass: 'captions-container',
prevButtonClass: 'prevButton', 
nextButtonClass: 'nextButton', 

//called on load of the slides
onSlideLoad: function () {},

//called before each slide shift
beforeSlideShift: function () {}, 

//called after each slice shift
afterSlideShift: function () {}, 

//called for previous button click
previousSlideShift: function () {}, 

//called for next button click
nextSlideShift: function () {}, 

//to handle resize of the window
resizeSlideShift: function () {}, 

//to handle thumbnail clicks
thumbnailClick: function () {} 

---

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