Nocturnal Prancing Mosquito

    This package has been deprecated

    Author message:

    Package no longer supported. Please use package owl.carousel

    owl.carousel2

    2.2.2 • Public • Published

    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.

    Install

    npm i owl.carousel2

    DownloadsWeekly Downloads

    2,337

    Version

    2.2.2

    License

    SEE LICENSE IN https://github.com/saurabh-sharma/owl.carousel2/blob/master/LICENSE

    Unpacked Size

    2.13 MB

    Total Files

    186

    Last publish

    Collaborators

    • saurabh-sharma