Generic Cross-browser Slideshow Plugin With jQuery - KinSlideshow

KinSlideshow is a pretty simple, fully configurable jQuery plugin which helps you create an automatic slideshow for presenting your popular images/posts on the webpage.

Features:

• No CSS required.
• Works on any modern browsers.
• Auto rotation like a carousel.
• Auto caption bar that loads content from img's alt attribute.
• Allows to slide between images on click or hover.
• Custom pagination.

How to use it:

1. First you need to load jQuery library and the JavaScript file jquery.KinSlideshow.min.js in the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/jquery.KinSlideshow-1.2.1.min.js"></script>

2. Add a group of images into a container element. Note that the wrapping element must have a 'visibility:hidden;' CSS property.

<div id="KinSlideshow" style="visibility:hidden;">
  <a href="#"><img src="1.jpg" alt="Alt 1"></a>
  <a href="#"><img src="2.jpg" alt="Alt 2"></a>
  <a href="#"><img src="3.jpg" alt="Alt 3"></a>
  <a href="#"><img src="4.jpg" alt="Alt 4"></a>
  <a href="#"><img src="5.jpg" alt="Alt 5"></a>
  ...
</div>

3. Initialize the slideshow with all default options.

$("#KinSlideshow").KinSlideshow();

4. Config your slideshow with the following options.

$("#KinSlideshow").KinSlideshow({

  // transition delay in seconds
  intervalTime: 5,

  // animation speed in ms
  moveSpeedTime: 400,

  //  left | right | up | down
  moveStyle: "left",

  // mouseclick | mouseover
  mouseEvent: "mouseclick",

  // displays caption bar
  isHasTitleBar: true,

  // caption bar's styles
  titleBar: {
    titleBar_height: 40, 
    titleBar_bgColor: "#000000", 
    titleBar_alpha: 0.5
  },

  // displays image titles
  isHasTitleFont: true,

  // image title's styles
  titleFont: {
    TitleFont_size: 12, 
    TitleFont_color: "#FFFFFF", 
    TitleFont_family: "Verdana", 
    TitleFont_weight: "bold"
  },

  // displays pagination
  isHasBtn: true,

  // pagination styles
  btn: {
    btn_bgColor: "#666666",
    btn_bgHoverColor: "#CC0000",
    btn_fontColor: "#CCCCCC",
    btn_fontHoverColor: "#000000",
    btn_fontFamily: "Verdana",
    btn_borderColor: "#999999",
    btn_borderHoverColor: "#FF0000",
    btn_borderWidth: 1,
    btn_bgAlpha: 0.7
  }
  
});

---

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