OwlCarousel2 – Beautiful, Responsive, Touch-Enabled jQuery Carousels

Owl Carousels 2

The OwlCarousel2 is the second major version of the famous Carousel / Slider jQuery Plugin. It is compatible with all major browsers, including 7+ and Safari (also on iPad and iPod 4). The script has also been tested on Googles Nexus 7, Samsungs Galaxy S4 and Nokias 8s (with Windows 8)! This library requires at least jQuery version 1.8.4!

OwlCarousel2 has the ability to make almost all options responsive, can create infinity loops, and also supports YouTube / Vimeo / Vzaar Videos. It has also many settings to configure the padding, margin and alignment of an item and more! The scripts offers also a DOT and Left/Right Navigation, a lazyLoad implementation, RTL support and configurable autoplay / animation effects.

Download the latest version of Owl Carousel 2 as .ZIP or as .TAR package!

npm i owl.carousel --save

yarn add owl.carousel --save

bower install owl.carousel --save

Instructions

The package itself contains the main JavaScript file, in a (un)minified version, as well as the main Stylesheet. It also includes 2 optional themes, including respective image sources. All Stylesheets are also available in a minified edition.

 

Load OwlCarousel2

We recommend to load the Stylesheet, as well as the optional theme if desired, directly within the HTML header. The JavaScript file should be linked after the opened <body> tag. But don’t forget to link the jQuery library BEFORE the OwlCarousel2 Script!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/owl.carousel.css" />
        
        <!-- Optional Theme Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/owl.theme.default.css" />
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/owl.carousel.min.js"></script>

        <!-- Required HTML Structure -->
        <div class="owl-carousel">
            <div><!-- [...] --></div>
            <div><!-- [...] --></div>
            <div><!-- [...] --></div>
            <div><!-- [...] --></div>
            <div><!-- [...] --></div>
        </div>
    </body>
</html>

 

Configure OwlCarousel2

The current Version (2.3.4) offers 51 options to configure the design, the structure as well as the behavior of the script. It is really recommended to read the official documentation on the official website. I will keep a list with all settings (and the respective default values) here:

jQuery(document).ready(function(){
    jQuery("#my-carousel").owlCarousel({
        items:                  3,
        margin:                 0,
        loop:                   false,
        center:                 false,
        mouseDrag:              true,
        touchrag:               true,
        pullDrag:               true,
        freeDrag:               false,
        stagePadding:           0,
        merge:                  true,
        mergeFit:               true,
        autoWidth:              false,
        startPosition:          0, 
        URLhashListener:        false,
        nav:                    false,
        rewind:                 true,
        navText:                ["'next'", "'prev'"],
        nevElement:             "div",
        slideBy:                1,
        slideTransition:        "",
        dots:                   true,
        dotsEach:               false,
        dotsData:               false,
        lazyLoad:               false,
        lazyLoadEager:          0,
        autplay:                false,
        autoplayTimeout:        5000,
        autoplayHowerPause:     false,
        smartSpeed:             250,
        fluidSpeed:             false,
        autoplaySpeed:          false,
        navSpeed:               false,
        dotsSpeed:              false,
        dragEndSpeed:           false,
        callbacks:              true,
        responsive:             {},
        responsiveRefreshRate:  200,
        responsiveBaseElement:  window,
        video:                  false,
        videoHeight:            false,
        videoWidth:             false,
        animateOut:             false,
        animateIn:              false,
        fallbackEasing:         "string",
        info:                   false,
        nestedItemSelector:     false,
        itemElement,            "div",
        stageElement:           "div",
        navContainer:           false,
        dotsContainer:          false,
        checkVisible:           true
    });
});

 

2 thoughts on “OwlCarousel2 – Beautiful, Responsive, Touch-Enabled jQuery Carousels

  1. Looks good, but I don’t like jquery at all. Woould ne nice to see this in Vanilla JavaScript.

    Btw. Your website isn’t fully responsive, you may should add some CSS rules ­čśë

    1. Thanks, and I know. We are still working on the website. A fully responsive Design is still on our ToDo list, next to many other features.

      Thanks for commenting and still have fun on web-scripts.net :3

Leave a Reply

Top