Fully Responsive & Mobile-friendly jQuery Carousel Plugin - Owl Carousel 2

An upgraded version of jQuery OWL Carousel plugin. jQuery OWL Carousel 2 helps you create a highly customizable, fully responsive, mobile touch-friendly content carousel/slider with lots of useful functionalities for modern web/mobile designs.

NOTE THAT THE PLUGIN IS NOW DEPRECATED. Check out our Carousel section for more Carousel plugins.

More Features:

• Content lazy loading.
• Supports ajax content, videos, images, etc.
• CSS3 aniamtions.
• Auto height, auto width and autoplay.
• Mousewheel, mouse drag and touch swipe to slide.
• Custom animation types and speed.
• Infinite loop like a carousel.
• Callback events support.
• Cross browser. Works on modern browsers and IE7+.

Basic usage:

1. Load the major CSS and the theme CSS in the head section of the page.

<link rel="stylesheet" href="owlcarousel/owl.carousel.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.css">

2. Load the jQuery javascript library and the jQuery OWL Carousel 2 script at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.js"></script>

3. Create a simple carousel with the plain Html structure.

<div class="owl-carousel">

<div class="article"><h2>1</h2></div>
<div class="article"><h2>2</h2></div>
<div class="article"><h2>3</h2></div>
...

</div>

4. Call the plugin on the wrapper and setup the carousel via options.

$('.owl-carousel').owlCarousel({
items: 1,
loop: true,
margin: 10,
lazyLoad: true,
merge: true, 
video: true,
responsive:{	
480:{
items:2
},

678:{
items:3
},

960:{
items:5
}
}
});

4. Options and defaults.

// The number of items
items: 3,

// Infinite loop
loop: false,

// Center item
center: false,

// Go backwards when the boundary has reached.
rewind: false,

// Enable drag events.
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,

// margin-right(px) on item.
margin: 0,

// Padding left and right on stage (can see neighbours).
stagePadding: 0,

// Merge items.
merge: false,

// Fit merged items if screen is smaller than items value.
mergeFit: true,

// Set non grid content. 
autoWidth: false,

// Start position
startPosition: 0,

// false = ltr
rtl: false,

// Speed Calculate. 
smartSpeed: 250,

// Speed Calculate. 
fluidSpeed: false,

// Drag end speed.
dragEndSpeed: false,

// bject containing responsive options. 
// Can be set to false to remove responsive capabilities.
responsive: {},

// Responsive refresh rate.
responsiveRefreshRate: 200,

// Set on any DOM element. 
// If you care about non responsive browser (like ie8) then use it on main wrapper. 
// This will prevent from crazy resizing.
responsiveBaseElement: window,

// Easing for CSS2 $.animate.
fallbackEasing: 'swing',

// Callback to retrieve basic information (current item/pages/widths). 
// Info function second parameter is Owl DOM object reference.
info: false,

// Use it if owl items are deep nested inside some generated content. 
// E.g 'youritem'. Dont use dot before class name.
nestedItemSelector: false,

// Item seletors
itemElement: 'div',

// Stage selectors
stageElement: 'div',

// Default CSS classes
refreshClass: 'owl-refresh',
loadedClass: 'owl-loaded',
loadingClass: 'owl-loading',
rtlClass: 'owl-rtl',
responsiveClass: 'owl-responsive',
dragClass: 'owl-drag',
itemClass: 'owl-item',
stageClass: 'owl-stage',
stageOuterClass: 'owl-stage-outer',
grabClass: 'owl-grab'

Change logs:

v2.3.4 (2018-04-21)

• Update

v2.3.3 (2018-04-20)

• Updated the regexp to recognize youtube-nocookie.com urls as youtube.
• Fixes layout issues when combining lazyloading with autoheight

v2.3.2 (2018-03-17)

• Address 1px autoheight issues

v2.3.1 (2018-02-24)

• update

v2.2.1 (2017-03-01)

• Removed unused tests, removed peerDependency, version bump for upcoming release

v2.2 (2016-10-26)

• Refactors Core
• Makes slideBy option independet of nav
• Corrects update of navRewind
• Corrects change event for position in carousel
• Replaces indexOf with $.inArray in navigaiton plugin
• Corrects to override in navigation plugin
• Adds core overrides for navigation plugin
• Corrects naming of plugins as object members
• Corrects navText option of navigation plugin
• Corrects slideBy option and adds events for navigation plugin
• Corrects adaptive behaviour of the navigation plugin
• fixed autoHeight plugin
• fixed animate plugin
• added autoHeight demo
• fixed download link in subpages

v2 beta 3 (2016-04-12)

• Update docs and small fixes
• Fixes merge conflict. 
• Adds parsing for addition styles of vimeo URLs.
• Fixed Autoplay timer not reset when using nav dots
• prevent half pixel blurry image

v2.4 (2014-06-10)

• Update docs and small fixes

v2.3 (2014-06-02)

• update

2014-05-15

• update

 

---

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