Generic Banner Carousel Plugin With jQuery - hslider
File Size: | 16.9 KB |
---|---|
Views Total: | 2379 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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">></div> <div class="prev"><</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">></div> <div class="prev"><</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.