Owl Carousal

HTML

<div data-dots="true" data-nav="true" data-items='{"0":{"items":2},"600":{"items":2}}' data-autoplay="true" data-margin="30" data-loop="true" class="owl-carousel owl-theme owl-nav-outer owl-dot-round">
	<div class="item"><img src="assets/images/s-01.jpg" class="radius-primary"/></div>
	<div class="item"><img src="assets/images/s-02.jpg" class="radius-primary"/></div>
	<div class="item"><img src="assets/images/s-03.jpg" class="radius-primary"/></div>
	<div class="item"><img src="assets/images/s-04.jpg" class="radius-primary"/></div>
	<div class="item"><img src="assets/images/s-05.jpg" class="radius-primary"/></div>
	<div class="item"><img src="assets/images/s-06.jpg" class="radius-primary"/></div>
</div>

JavaScript

<script src="assets/lib/owl.carousel/dist/owl.carousel.min.js"></script>

CSS

<link href="assets/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">

Navigation positions and shapes

Use the following classes or their combinations along with .owl-carousel.owl-theme to update the navigtation and dots scheme:

1. .owl-dots-inner
2. .owl-dot-round
3. .owl-nav-outer
4. .owl-nav-square

Options

data-options={"dots": true, "autoplay": true, "loop": true, "items": 3}}

Option	Type	Defaults	Description
items	Number	3	The number of items you want to see on the screen.
margin	Number	0	margin-right(px) on item.
loop	Boolean	false	Infinity loop. Duplicate last and first items to get loop illusion.
center	Boolean	false	Center item. Works well with even an odd number of items.
mouseDrag	Boolean	true	Mouse drag enabled.
touchDrag	Boolean	true	Touch drag enabled.
pullDrag	Boolean	true	Stage pull to edge.
freeDrag	Boolean	false	Item pull to edge.
stagePadding	Number	0	Padding left and right on stage (can see neighbours).
merge	Boolean	false	Merge items. Looking for data-merge='{number}' inside item..
mergeFit	Boolean	true	Fit merged items if screen is smaller than items value.
autoWidth	Boolean	false	Set non grid content. Try using width style on divs.
startPosition	Number/String	0	Start position or URL Hash string like '#id'.
URLhashListener	Boolean	false	Listen to url hash changes. data-hash on items is required.
nav	Boolean	false	Show next/prev buttons.
rewind	Boolean	true	Go backwards when the boundary has reached.
navText	Array	['next','prev']	HTML allowed.
navElement	String	div	DOM element type for a single directional navigation link.
slideBy	Number/String	1	Navigation slide by x. 'page' string can be set to slide by page.
dots	Boolean	true	Show dots navigation.
dotsEach	Number/Boolean	false	Show dots each x item.
dotData	Boolean	false	Used by data-dot content.
lazyLoad	Boolean	false	Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not
lazyContent	Boolean	false	lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature.
autoplay	Boolean	false	Autoplay.
autoplayTimeout	Number	5000	Autoplay interval timeout.
autoplayHoverPause	Boolean	false	Pause on mouse hover.
smartSpeed	Number	250	Speed Calculate. More info to come..
fluidSpeed	Boolean	Number	Speed Calculate. More info to come..
autoplaySpeed	Number/Boolean	false	autoplay speed.
navSpeed	Number/Boolean	false	Navigation speed.
dotsSpeed	Boolean	Number/Boolean	Pagination speed.
dragEndSpeed	Number/Boolean	false	Drag end speed.
callbacks	Boolean	true	Enable callback events.
responsive	Object	empty object	Object containing responsive options. Can be set to false to remove responsive capabilities.
responsiveRefreshRate	Number	200	Responsive refresh rate.
responsiveBaseElement	DOM element	window	Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.
video	Boolean	false	Enable fetching YouTube/Vimeo/Vzaar videos.
videoHeight	Number/Boolean	false	Set height for videos.
videoWidth	Number/Boolean	false	Set width for videos.
animateOut	String/Boolean	false	Class for CSS3 animation out.
animateIn	String/Boolean	false	Class for CSS3 animation in.
fallbackEasing	String	swing	Easing for CSS2 $.animate.
info	Function	false	Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
nestedItemSelector	String/Class	false	Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.
itemElement	String	div	DOM element type for owl-item.
stageElement	String	div	DOM element type for owl-stage.
navContainer	String/Class/ID/Boolean	false	Set your own container for nav.
dotsContainer	String/Class/ID/Boolean	false	Set your own container for nav.

For more Details see Owl Carousel Documentation ⟶