Tiny SEO-Friendly Carousel jQuery Plugin - jCarouselLite
File Size: | 235 KB |
---|---|
Views Total: | 1112 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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"><</button> <button type="button" class="next">></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.