Feature-rich Image Carousel Plugin For jQuery - lrCalousel

lrCalousel is a simple, CSS-less and powerful jQuery slider/carousel plugin that features custom animations, horizontal & vertical rotation, countdown timer and more.

More features:

• Multiple images per slide.
• Switches between images by single click or mouse hover.
• Autoplay at a given speed.
• Custom view size.
• Fade or scroll transition effects.

How to use it:

1. Just include the jQuery lrCalousel plugin's script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/carousel.js"></script> 

2. The basic html structure for the carousel.

<div class="J_widget">
  <ul class="contentCls">
    <li><img src="1.jpg" alt=""></li>
    <li><img src="2.jpg" alt=""></li>
    <li><img src="3.jpg" alt=""></li>
    <li><img src="4.jpg" alt=""></li>
  </ul>
  <ul class="navCls">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="prev toggleCls abs inner-left"></div>
  <div class="next toggleCls abs inner-right"></div>
</div>

3. Initialize the plugin to render a default carousel on the webpage.

var Carousel=$.render_all(".J_widget");

4. Here is a list of default options which can be passed as an object to the data-config attribute.

data-config='{
  type: "carousel", // or tab
  effect: "none", // fade/scrollx/scrolly
  contentCls: ".contentCls",
  navCls: ".navCls",
  nextBtnCls: ".next",
  prevBtnCls: ".prev",
  speend: 500,
  delay: 5000,
  width: 0,
  height: 0,
  drift: 0,
  reverse: 0,
  autoplay: 1,
  hasTriggers: 1,
  triggerType: "click", // or mouseover
  timeCls: ".time-box",
  endtime: 0,
  timeUnitCls: {
    y: ".t-y",
    m: ".t-m",
    d: ".t-d",
    h: ".t-h",
    i: ".t-i",
    s: ".t-s"
  },
  move: 0,
  pageX: 0,
  pageY: 0,
  key: 0,
  timekey: 0,
  index: 0,
  endIndex: 0,
  num: 0,
  cid: Math.random().toString(36).split(".")[1],
  callback: null,
  render: true // auto render
}'

---

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