Simple Practical Image Carousel Plugin With jQuery - jcarousel
File Size: | Unknown |
---|---|
Views Total: | 1752 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, lightweight, practical carousel plugin for jQuery that loops automatically and infinitely over images with support for arrows navigation and custom captions.
More features:
- Allows to slide multiple images at a time.
- Allows to enable / disable autoplay mode.
- Start/stop callback functions.
How to use it:
1. Load the jQuery jcarousel plugin and jQuery library in the html page just like the other jQuery plugins.
<link rel="stylesheet" href="jcarousel.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jcarousel.js"></script>
2. The main HTML structure for the carousel.
<div class="jcarousel" id="test1"> <a class="jcarousel-control prev"><</a> <a class="jcarousel-control next">></a> <ul class="jcarousel-list"> <li class="jcarousel-item"> <a href="#"> <img src="1.jpg" alt="demo01" /> <p class="jcarousel-caption">Caption 1</p> </a> </li> <li class="jcarousel-item"> <a href="#"> <img src="2.jpg" alt="demo02" /> <p class="jcarousel-caption">Caption 2</p> </a> </li> <li class="jcarousel-item"> <a href="#"> <img src="3.jpg" alt="demo03" /> <p class="jcarousel-caption">Caption 3</p> </a> </li> </ul> </div>
3. Invoke the plugin with default options.
$("#demo").jcarousel();
4. Possible plugin options to customize the carousel.
$("#demo").jcarousel({ // enable / disable disabled: false, // width of carousel width: 300, // the number of images per slide imageCount: 2, // aspect ratio imageRatio: 2, // enable autoplay autoplay: false, // autoplay interval speed: 1000, // enable mobile support mobile: false, // timer timer: null, // callbacks onStart: function () { }, onStop: function () { }, });
5. API.
// enable the carousel $("#demo").jcarousel("enable"); // disable the carousel $("#demo").jcarousel("disable"); // enable autoplay $("#demo").jcarousel("auto", true); // disable autoplay $("#demo").jcarousel("auto", false);
This awesome jQuery plugin is developed by caojianping. For more Advanced Usages, please check the demo page or visit the official website.