Owl Carousel 2

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

For more Details see Owl Carousel Documentation⟶

HTML
<div data-options='{"margin":30,"nav":true,"autoplay":true,"loop":true,"dots":false,"responsive":{"0":{"items":1},"576":{"items":2},"992":{"items":3}}}' class="owl-carousel owl-theme owl-nav-outer owl-dot-round">
	<div class="item"><img src="assets/images/gallery/01.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/02.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/03.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/04.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/05.jpg"/></div>
	<div class="item"><img src="assets/images/gallery/06.jpg"/></div>
</div>
JavaScript
<script src="assets/lib/owl.carousel/owl.carousel.js"></script>
CSS
<link href="assets/lib/owl.carousel/owl.carousel.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
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.
Boolean false Show next/prev buttons.
rewind Boolean true Go backwards when the boundary has reached.
Array ['next','prev'] HTML allowed.
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.
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.
String/Class/ID/Boolean false Set your own container for nav.
dotsContainer String/Class/ID/Boolean false Set your own container for nav.