Owl Carousel 2

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

For more Details seeOwl 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-optionsobject
Example
data-options={"dots": true, "autoplay": true, "loop": true, "items": 3}}
OptionTypeDefaultsDescription
itemsNumber3The number of items you want to see on the screen.
marginNumber0margin-right(px) on item.
loopBooleanfalseInfinity loop. Duplicate last and first items to get loop illusion.
centerBooleanfalseCenter item. Works well with even an odd number of items.
mouseDragBooleantrueMouse drag enabled.
touchDragBooleantrueTouch drag enabled.
pullDragBooleantrueStage pull to edge.
freeDragBooleanfalseItem pull to edge.
stagePaddingNumber0Padding left and right on stage (can see neighbours).
mergeBooleanfalseMerge items. Looking for data-merge='{number}' inside item..
mergeFitBooleantrueFit merged items if screen is smaller than items value.
autoWidthBooleanfalseSet non grid content. Try using width style on divs.
startPositionNumber/String0Start position or URL Hash string like '#id'.
URLhashListenerBooleanfalseListen to url hash changes. data-hash on items is required.
BooleanfalseShow next/prev buttons.
rewindBooleantrueGo backwards when the boundary has reached.
Array['next','prev']HTML allowed.
StringdivDOM element type for a single directional navigation link.
slideByNumber/String1Navigation slide by x. 'page' string can be set to slide by page.
dotsBooleantrueShow dots navigation.
dotsEachNumber/BooleanfalseShow dots each x item.
dotDataBooleanfalseUsed by data-dot content.
lazyLoadBooleanfalseLazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not<img>
lazyContentBooleanfalselazyContent 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.
autoplayBooleanfalseAutoplay.
autoplayTimeoutNumber5000Autoplay interval timeout.
autoplayHoverPauseBooleanfalsePause on mouse hover.
smartSpeedNumber250Speed Calculate. More info to come..
fluidSpeedBooleanNumberSpeed Calculate. More info to come..
autoplaySpeedNumber/Booleanfalseautoplay speed.
Number/BooleanfalseNavigation speed.
dotsSpeedBooleanNumber/BooleanPagination speed.
dragEndSpeedNumber/BooleanfalseDrag end speed.
callbacksBooleantrueEnable callback events.
responsiveObjectempty objectObject containing responsive options. Can be set to false to remove responsive capabilities.
responsiveRefreshRateNumber200Responsive refresh rate.
responsiveBaseElementDOM elementwindowSet 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.
videoBooleanfalseEnable fetching YouTube/Vimeo/Vzaar videos.
videoHeightNumber/BooleanfalseSet height for videos.
videoWidthNumber/BooleanfalseSet width for videos.
animateOutString/BooleanfalseClass for CSS3 animation out.
animateInString/BooleanfalseClass for CSS3 animation in.
fallbackEasingStringswingEasing for CSS2 $.animate.
infoFunctionfalseCallback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
nestedItemSelectorString/ClassfalseUse it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.
itemElementStringdivDOM element type for owl-item.
stageElementStringdivDOM element type for owl-stage.
String/Class/ID/BooleanfalseSet your own container for nav.
dotsContainerString/Class/ID/BooleanfalseSet your own container for nav.