Demo

More Demos

Awesome!

Check more demos here! See what Owl can do.

Images

Full Width

Custom

One Slide

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.

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

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

<!-- You can use latest version of jQuery  -->
<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 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 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>

3. Call the plugin

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

$(document).ready(function() {

  $(".owl-carousel").owlCarousel();

});

Customizing

1. Options

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

Variable Default Description
slideSpeed 200 Slide speed in milliseconds
paginationSpeed false Pagination speed in milliseconds
autoPlay false Auto play per slide. Change to any integrer for example "paginationSpeed : 8000" to play every 8 seconds
goToFirst true Slide to first item if autoPlay reach end
goToFirstSpeed 1000 Slide speed of goToFirst option in milliseconds
navigation false Display "next" and "prev" buttons. Fully customizable. Note that for better control over navigation the div with arrows and pagination is outside your carousel wrapper
navigationText ["prev","next"] You can cusomize your own text for navigation. To get empty buttons use false : "navigationText : false"
pagination true Show pagination.
paginationNumbers false Show numbers inside pagination buttons
responsive true You can use Owl Carousel on desktop-only websites too! Just change that to "false" to disable resposive capabilities
items 5 This variable allows you to set the maximum amount of items displayed at a time with the widest browser width
itemsDesktop [1199,4] This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window<=1199){ show 4 slides per page} Alternatively use "itemsDesktop: false" to override these settings.

To fully understand how it works check my Custom Demo
itemsDesktopSmall [979,3] As above.
itemsTablet [768,2] As above.
itemsMobile [479,1] As above

2. Defaults

Carousel default settings

$(".owl-carousel").owlCarousel({

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

    //Autoplay
    autoPlay : false,
    goToFirst : true,
    goToFirstSpeed : 1000,

    // Navigation
    navigation : false,
    navigationText : ["prev","next"],
    pagination : true,
    paginationNumbers: true,

    // Responsive
    responsive: true,
    items : 5,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsMobile : [479,1]

})

3. API

To use Owl Carousel API use delegate function, as carousel initializes after 200 milliseconds.


//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.update() // Update Slide

owl.buildControlls()    // Build Controlls
owl.destroyControlls()  // Remove Controlls

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

//more to come...