Feature-rich Image Carousel Plugin For jQuery - lrCalousel
File Size: | 8.02 KB |
---|---|
Views Total: | 1047 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.