Owl Carousal

These modular elements can be readily used and customized in every layout across pages.

HTML

<div data-options='{"nav":true,"loop":true,"autoplay":true,"items":2}' class="owl-carousel owl-theme owl-nav-outer owl-dot-round">
	<div class="item"><img src="assets/images/gallery/2/01.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/2/02.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/2/03.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/2/04.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/2/05.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/2/06.jpg"/></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:

.owl-dots-inner
.owl-dot-round
.owl-nav-outer
.owl-nav-square

Options

data-options	object
Example	`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 `<img>`
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⟶