Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slider. To get started, check out https://owlcarousel2.github.io/OwlCarousel2/.

Notice: The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products' documentation as it's being used for malicious purposes.

This package can be installed with:

• npm: npm install --save owl.carousel or yarn add owl.carousel jquery
• bower: bower install --save owl.carousel

Or download the latest release.

Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:

const webpack = require('webpack');

//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

Load the required stylesheet and JS:

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

Put the required stylesheet at the top of your markup:

<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />

<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />

NOTE: If you want to use the default navigation styles, you will also need to include owl.theme.default.css.

Put the script at the bottom of your markup right after jQuery:

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

Wrap your items (div, a, img, span, li etc.) with a container element (div, ul etc.). Only the class owl-carousel is mandatory to apply proper styles:

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

NOTE: The owl-theme class is optional, but without it, you will need to style navigation features on your own.

Call the plugin function and your carousel is ready.

$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});

The documentation, included in this repo in the root directory, is built with Assemble and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally.

This package comes with Grunt and Bower. The following tasks are available:

• default compiles the CSS and JS into /dist and builds the doc.
• dist compiles the CSS and JS into /dist only.
• watch watches source files and builds them automatically whenever you save.
• test runs JSHint and QUnit tests headlessly in PhantomJS.

To define which plugins are build into the distribution just edit /_config.json to fit your needs.

Please read CONTRIBUTING.md.

Please make sure to check out our Roadmap Discussion.

The code and the documentation are released under the MIT License.