Skip to content

Latest commit

 

History

History
106 lines (69 loc) · 3.44 KB

README.md

File metadata and controls

106 lines (69 loc) · 3.44 KB
Raw

OwlCarousel2 was recently transferred to a new owner

Please make sure to check out our Roadmap Discussion.

Owl Carousel 2

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

Quick start

Install

This package can be installed with:

  • npm: npm install --save owl.carousel
  • bower: bower install --save owl.carousel

Or download the latest release.

Load

Webpack

Load the required stylesheet and JS:

import 'owl.carousel/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.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>

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

Documentation

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.

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.