OWL Carousel

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

Github / v1.3.2 / Changelog

Demo

More Demos

Awesome!

Check more demos here! See what Owl can do.

Hey wanna see more demos?

• Click events inside items
• Randomize items and buttons outside slider.
• Navigation on top by custom events
• Navigation on top by afterInit callback
• Progress Bar
• CSS3 Transitions
• Content manipulations: destroy, reinit, addItem, removeItem
• Auto scale up comparsion demo
• Synced Owls
• How to retrieve basic information from plugin (current, prev, all items, visible items etc.)

How To Use

1. Load jQuery and include Owl Carousel plugin files

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

2. Set up your HTML

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

<div id="owl-example" class="owl-carousel">
  <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>

3. Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(document).ready(function() {

  $("#owl-example").owlCarousel();

});

Customizing

1. Options

All of the options below are available to customize Owl Carousel.

2. Callbacks

3. Defaults

Carousel default settings

$("#owl-example").owlCarousel({

    // Most important owl features
    items : 5,
    itemsCustom : false,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsTabletSmall: false,
    itemsMobile : [479,1],
    singleItem : false,
    itemsScaleUp : false,

    //Basic Speeds
    slideSpeed : 200,
    paginationSpeed : 800,
    rewindSpeed : 1000,

    //Autoplay
    autoPlay : false,
    stopOnHover : false,

    // Navigation
    navigation : false,
    navigationText : ["prev","next"],
    rewindNav : true,
    scrollPerPage : false,

    //Pagination
    pagination : true,
    paginationNumbers: false,

    // Responsive 
    responsive: true,
    responsiveRefreshRate : 200,
    responsiveBaseWidth: window,

    // CSS Styles
    baseClass : "owl-carousel",
    theme : "owl-theme",

    //Lazy load
    lazyLoad : false,
    lazyFollow : true,
    lazyEffect : "fade",

    //Auto height
    autoHeight : false,

    //JSON 
    jsonPath : false, 
    jsonSuccess : false,

    //Mouse Events
    dragBeforeAnimFinish : true,
    mouseDrag : true,
    touchDrag : true,

    //Transitions
    transitionStyle : false,

    // Other
    addClassActive : false,

    //Callbacks
    beforeUpdate : false,
    afterUpdate : false,
    beforeInit: false, 
    afterInit: false, 
    beforeMove: false, 
    afterMove: false,
    afterAction: false,
    startDragging : false
    afterLazyLoad : false

})

4. Custom Events

Owl Carousel handles a few basic events. Mainly use them for custom navigation. See Demo

"owl.prev" //Go to previous
"owl.next" //Go to next
"owl.play" //Autoplay, also this event accept autoPlay speed as second parameter
"owl.stop" //Stop
"owl.goTo" //goTo provided item
"owl.jumpTo" //jumpTo provided item. Without slide animation.

5. Owl Data methods

To use Owl Carousel $.data use delegate function.

//Initialize Plugin
$(".owl-carousel").owlCarousel()

//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');

//Public methods
owl.next()   // Go to next slide
owl.prev()   // Go to previous slide
owl.goTo(x)  // Go to x slide
owl.jumpTo(x)  // Go to x slide without slide animation

//Auto Play
owl.play() // Autoplay
owl.stop() // Autoplay Stop

//Manipulation methods. See demo.
owl.addItem(htmlString [,targetPosition])
owl.removeItem(targetPosition)
owl.destroy()
owl.reinit(newOptions)

Bartosz Wojciechowski 2013 / @OwlFonk / email / changelog / donate /