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

Fully Responsive & Mobile-friendly jQuery Carousel Plugin - Owl Carousel 2
File Size: 806 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.

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+.

View more:

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>


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

items: 1,
loop: true,
margin: 10,
lazyLoad: true,
merge: true, 
video: true,



4. Options and defaults.

items: 3,
loop: false,
center: false,
rewind: false,

mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,

margin: 0,
stagePadding: 0,

merge: false,
mergeFit: true,
autoWidth: false,

startPosition: 0,
rtl: false,

smartSpeed: 250,
fluidSpeed: false,
dragEndSpeed: false,

responsive: {},
responsiveRefreshRate: 200,
responsiveBaseElement: window,

fallbackEasing: 'swing',

info: false,

nestedItemSelector: false,
itemElement: 'div',
stageElement: 'div',

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.2 (2018-03-17)

  • Address 1px autoheight issues

v2.3.1 (2018-02-24)

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


  • update


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