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.