Github / v1.1
Check more demos here! See what Owl can do.
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>
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>
Now call the Owl initializer function and your carousel is ready.
$(document).ready(function() { $(".owl-carousel").owlCarousel(); });
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 |
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] })
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...