Tiny SEO-Friendly Carousel jQuery Plugin - jCarouselLite

A lightweight jQuery plugin for creating touch-enabled and SEO-friendly carousels from any elements (like HTML lists or HTML5 selectors). It is easy to install and customizable for your needs in no time.

This carousel plugin is a great choice for galleries, product pages, content-heavy sites and much more. It is a great option for any web designer who's looking to create an awesome carousel on any site they design.

How to use it:

1. To get started, include the jCarouselLite plugin's files after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.jcarousellite.js"></script>

2. Add your content to the carousel slides. This carousel plugin supports most types of content like text, images, DIVs, and more.

<div class="carousel">
  <ul>
    <li>
      Slide 1
    </li>
    <li>
      Slide 2
    </li>
    <li>
      Slide 3
    </li>
    ...
  </ul>
</div>

3. Add prev/next buttons or pagination links to the carousel.

<button type="button" class="prev">&lt;</button>
<button type="button" class="next">&gt;</button>

<!-- OR -->
<div class="nav">
  <button type="button">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
  ...
</div>

4. Hide overflowing content.

.carousel {
  overflow: hidden;
}

5. Initialize the plugin and done.

$('.carousel').jCarouselLite({
  btnNext: '.next',
  btnPrev: '.prev'
});

// OR
$('.carousel').jCarouselLite({
  btnGo: $('div.nav').find('button'),
});

6. Enable mouse wheel events on the carousel. Requires jQuery mousewheel plugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

$('.carousel').jCarouselLite({
  btnNext: '.next',
  btnPrev: '.prev',
  mouseWheel: true,
});

7. Available plugin options to customize the carousel.

$('.carousel').jCarouselLite({

  // container selector
  containerSelector: 'ul',

  // item selector
  itemSelector: 'li',

  // navigation selectors
  btnPrev: null,
  btnNext: null,

  // array (or jQuery object) of elements
  btnGo: null,

  // selector (or jQuery object) indicating the containing element for pagination navigation.
  autoPager: null,

  // disabled class
  btnDisabledClass: 'disabled',

  // class applied to the active slide and btnGo element
  activeClass: 'active',

  // class applied to the btnGo elements corresponding to the visible slides
  visibleClass: 'vis',

  // enable mousewheel support
  mouseWheel: false,

  // animation speed
  speed: 200,

  // additional easing functions
  easing: null,

  // milliseconds between scrolls
  timeout: 4000,

  // true to enable auto scrolling; 
  // number to auto-scroll by different number at a time than that of scroll option
  auto: false,

  // true to enable changing direction of auto scrolling when user clicks prev or next button
  directional: false,

  // number of times before autoscrolling will stop. 
  // (if circular is false, won't iterate more than number of items)
  autoStop: false,

  // pause scrolling on hover
  pause: true,

  // vertical layout
  vertical: false,

  // continue scrolling when reach the last item
  circular: true,

  // the number to be visible at a given time.
  visible: 3,

  // index of item to show initially in the first position
  start: 0,

  // number of items to scroll at a time
  scroll: 1,

  // whether to set initial styles on the carousel elements. See readme for info
  autoCSS: true,

  // whether the dimensions should change on resize
  responsive: false,

  // whether to set width of <li>s (and left/top of <ul>) based on width of <div>
  autoWidth: false,

  // touch options
  swipe: true,
  swipeThresholds: {
    x: 80,
    y: 40,
    time: 150
  },

  // whether to prevent vertical scrolling of the document window when swiping
  preventTouchWindowScroll: true,

});

8. Callback functions.

$('.carousel').jCarouselLite({

  // The function can take 2 arguments:
  // 1. The merged options object
  // 2. A jQuery object containing the <li> items in the carousel
  // If the function returns `false`, the plugin will skip all the carousel magic for that carousel div
  init: function() {},

  // called once the first slide is hit
  first: null,

  // called once the last slide is hit
  last: null,

  // called before each transition starts
  beforeStart: null,

  // called after each transition ends
  afterEnd: null

});

9. API methods.

// pause
$('.carousel').trigger('pauseCarousel');

// resume
$('.carousel').trigger('resumeCarousel');

// stop
$('.carousel').trigger('stopCarousel');

// refresh
$('.carousel').trigger('refreshCarousel', '[all]')

// destroy
$('.carousel').trigger('endCarousel');

// goto the next slide
$('div.carousel').trigger('go');

// goto a specific slide
$('.carousel').trigger('go', 3);

// goto a specific slide relative to the currently active item
$('.carousel').trigger('go', '+=2');
$('.carousel').trigger('go', '-=2');

---

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