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:
.owl-dots-inner
.owl-dot-round
.owl-nav-outer
Options
data-options | object |
---|---|
Example |
|
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. |