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:
.owl-dots-inner
.owl-dot-round
.owl-nav-outer
.owl-nav-square
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 |
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 ⟶
Sign up for email alerts
Stay current with our latest insights