Generic Banner Carousel Plugin With jQuery - hslider

hslider is a generic jQuery based banner slider/carousel plugin which has the ability to animate multiple images in the same slide.

More features:

• Auto rotation.
• Horizontal & vertical sliding.
• Fade animation.
• Easing functions.
• Infinite loop.

How to use it:

1. The html structure for the carousel that has multiple images on a slide.

<div class="hslider" id="J_slider">
  <ul class="hslider-content">
      <li class="hslider-c active">
          <a href="#">
              <img class="main-img" data-src="https://picsum.photos/630/405?image=773">
              <img class="left-img" data-src="logo.png">
              <img class="right-img" data-src="jquery.png">
          </a>
      </li>
      <li class="hslider-c">
          <a href="#">
              <img class="main-img" data-src="https://picsum.photos/630/405?image=797">
              <img class="left-img" data-src="logo.png">
              <img class="right-img" data-src="jquery.png">
          </a>
      </li>
      <li class="hslider-c">
          <a href="#">
              <img class="main-img" data-src="https://picsum.photos/630/405?image=773">
              <img class="left-img" data-src="logo.png">
              <img class="right-img" data-src="jquery.png">
          </a>
      </li>
      <li class="hslider-c">
          <a href="#">
              <img class="main-img" data-src="https://picsum.photos/630/405?image=777">
              <img class="left-img" data-src="logo.png">
              <img class="right-img" data-src="jquery.png">
          </a>
      </li>
  </ul>
  <ol class="hslider-nav">
      <li class="hslider-n active">1</li>
      <li class="hslider-n">2</li>
      <li class="hslider-n">3</li>
      <li class="hslider-n">4</li>
  </ol>
  <div class="hslider-pager">
      <div class="next">&gt;</div>
      <div class="prev">&lt;</div>
  </div>
</div>

2. The html structure for the carousel that has only one image on a slide.

<div class="hslider" id="J_slider2">
  <ul class="hslider-content">
    <li class="hslider-c active">
      <a href="#"><img src="1.jpg"></a>
    </li>
    <li class="hslider-c active">
      <a href="#"><img src="2.jpg"></a>
    </li>
    <li class="hslider-c active">
      <a href="#"><img src="3.jpg"></a>
    </li>
    <li class="hslider-c active">
      <a href="#"><img src="4.jpg"></a>
    </li>
  </ul>
  <ol class="hslider-nav">
    <li class="hslider-n active">1</li>
    <li class="hslider-n">2</li>
    <li class="hslider-n">3</li>
    <li class="hslider-n">4</li>
  </ol>
  <div class="hslider-pager">
    <div class="next">&gt;</div>
    <div class="prev">&lt;</div>
  </div>
</div>

3. The primary CSS styles for the carousel. To create a responsive carousel.

.hslider {
  height: 405px;
  width: 630px;
  overflow: hidden;
  position: relative;
}

.hslider-content li {
  display: block;
  position: relative;
  z-index: 1;
  width: 630px;
  height: 405px;
  overflow: hidden;
  float: left
}

.hslider-content .hslider-c { display: none; }

.hslider-content .active { display: block; }

.hslider .main-img { display: block; }

.hslider .left-img {
  opacity: 0;
  display: block;
  z-index: 1;
  position: absolute;
  left: -800px;
  _left: 0;
  _display: none;
  top: 0;
}

.hslider .right-img {
  opacity: 0;
  display: block;
  z-index: 2;
  position: absolute;
  right: 20px;
  _right: 0;
  _display: none;
  top: 0;
}

.hslider-nav {
  position: absolute;
  z-index: 2;
  bottom: 15px;
  right: 15px;
}

.hslider-nav li {
  background: #fff;
  float: left;
  display: inline;
  width: 25px;
  height: 7px;
  margin-left: 3px;
  font-size: 0;
  line-height: 0;
  opacity: 0.4;
  filter: alpha(opacity=40);
  overflow: hidden;
  cursor: pointer
}

.hslider-nav li.active {
  opacity: 1;
  filter: alpha(opacity=100);
}

.hslider .next, .hslider .prev {
  position: absolute;
  top: 50%;
  margin-top: -31px;
  z-index: 1;
  width: 28px;
  height: 62px;
  line-height: 62px;
  background: #000;
  background: rgba(0,0,0,.2);
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  font-family: simsun;
  cursor: pointer;
  _background-color: #000;
  filter: alpha(opacity=20);
  -webkit-user-select: none;
}

.hslider .hslider-pager { display: none; }

.hslider:hover .hslider-pager { display: block; }

.hslider .prev {
  left: 0;
  border-radius: 0 5px 5px 0;
}

.hslider .next {
  right: 0;
  border-radius: 5px 0 0 5px;
}

4. Import jQuery library and the jQuery hslider plugin.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/hslider.js"></script>

5. Enable the carousel with default options.

$("#J_slider").hslider();

6. Plugin's default options.

$("#J_slider").hslider({
  
  // default index
  index : 0, 
  index2 : 0,

  // shows first image randomly
  firstRandom: true, 

  // active class
  activeClass:"active", 

  // is autoplay?
  autoPlay: false, 

  // autoplay interval
  delay: 8000, 

  // animation speed
  speed: 750, 

  // "linear" or "swing"
  easing: 'swing', 

  // how many images per slide
  perView: 1, 

  // infinite loop
  infinite: true, 

  // or "horizontal", "vertical", "fade"
  animation: "combine3Img",

  // default markups
  contentWrap: "."+slider.name + "-content",
  contentItem: "."+slider.name + "-c",

  // default classes
  nav:{
    wrapClass: "."+slider.name + "-nav",
    itemClass: "."+slider.name + "-n"
  },
  pager:{
    wrapClass: "."+ slider.name + "-page",
    prevClass: "."+"prev",
    nextClass: "."+"next"
  }

});

---

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