OWL Carousel - beautiful responsive carousel

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.

"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)