owl.carousel2

Update

PR #2021 is merged. Please follow OwlCarousel2.

This plugin is a fork of original plugin OwlCarousel2 with a fix that maintains the event binded to the slides while creating cloned slides when loop:true

Until the PR #2021 is merged, feel free to use this repo in your projects.

Owl Carousel 2

Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slider.

Quick start

Or download the latest release.

Load

Webpack

Load the required stylesheet and JS:

import 'owl.carousel2/dist/assets/owl.carousel.css';
import $ from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';

Static HTML

Put the required stylesheet at the top of your markup:

<link rel="stylesheet" href="/node_modules/owl.carousel2/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.carousel2/dist/owl.carousel.min.js"></script>

Usage

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();
});

Building

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.

Contributing

Please read CONTRIBUTING.md.

License

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