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 | |
| 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⟶