Simple Practical Image Carousel Plugin With jQuery - jcarousel

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.