Simple Extensible Image Carousel Plugin With jQuery - BannerSlider
File Size: | 47.5 KB |
---|---|
Views Total: | 1328 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery carousel plugin used for generating an infinite, smooth image slider that allows you to move the images left or right with custom controls.
How to use it:
1. Insert your carousel images into the webpage.
<div class="banner"> <a href="#"><img src="1.jpg" alt=""></a> <a href="#"><img src="2.jpg" alt=""></a> <a href="#"><img src="3.jpg" alt=""></a> <a href="#"><img src="4.jpg" alt=""></a> ... </div>
2. Put the jQuery BannerSlider plugin's script after you've loaded jQuery library.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/jquery.bannerSlider.js"></script>
3. Initialize the image carousel.
$('.banner').bannerSlider();
4. Make the image carousel responsive.
.banner { width: 90%; } .banner img { width: 100%; }
5. Customization options.
// direction // 'left' or 'right' move: "left", // pagination options slider:{ showSlider: "true", showIndex: "true", slParentBg: "rgba(0,0,0,0.5)", slph: "48px", slBg: "rgba(255,0,0,0.2)", slHBg: "rgba(255,255,255,0.8)", slHColor: "#000", slColor: "#fff", slWidth: "24px", slHeight: "24px", slRadius: "50%" }, // navigation options btn: { showBtn: "true", btnWidth: "48px", btnHeight: "48px", btnBg: "url(img/banbtn.png) no-repeat 0 0", posSpace: "25px" }
This awesome jQuery plugin is developed by EvKylin. For more Advanced Usages, please check the demo page or visit the official website.