Full-width Responsive Image Carousel Plugin - hslider

Just another jQuery slider plugin used for presenting your images in a responsive, automatic carousel component with navigation arrows and configurable transition delay.

How to use it:

1. Include the required stylesheet style.css in the head section, which will provide basic CSS styles for the carousel slider.

<link rel="stylesheet" href="style.css">

2. Insert your images with captions into the carousel using HTML5 figure and figcaptio tags as follows:

<div class="hsldr-container">

  <figure>
    <img src="1.jpg">
    <figcaption>Image 1</figcaption>
  </figure>

  <figure>
    <img src="2.jpg">
    <figcaption>Image 2</figcaption>
  </figure>

  <figure>
    <img src="3.jpg">
    <figcaption>Image 3</figcaption>
  </figure>

</div>

3. Include the JavaScript file jquery.hslider.js after you've loaded jQuery JavaScript library.

<script src="jquery.min.js"></script>
<script src="jquery.hslider.js"></script>

4. Include the jQuery imagesLoaded plugin to detect if all the images have been completely loaded.

<script src="imagesloaded.pkgd.min.js"></script>

5. Initialize the carousel plugin with default options.

$( ".hsldr-container" ).hslider();

6. Enable the bottom navigation bar and config the autoplay in the JavaScript.

$( ".hsldr-container" ).hslider({

  // displays bottom navigation bar
  navBar: false,

  // enables autoplay
  auto: false,

  // transition delay
  delay: 4000

});

Change log:

2016-03-25

• JS update

---

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