Simple Extensible Image Carousel Plugin With jQuery - BannerSlider

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.