124 lines
3.5 KiB
Handlebars
124 lines
3.5 KiB
Handlebars
|
---
|
|||
|
|
title: Built-in Plugins
|
|||
|
|
subTitle: Development
|
|||
|
|
nav: docs
|
|||
|
|
description: Owl Carousel Documentation
|
|||
|
|
|
|||
|
|
sort: 1
|
|||
|
|
tags:
|
|||
|
|
- Development
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
{{#markdown }}
|
|||
|
|
## Built-in Plugins
|
|||
|
|
> Owl Carousel supports plugin modular structure. This means that you can remove plugins that you won’t use or create new ones that fit your needs
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Plugins included
|
|||
|
|
|
|||
|
|
Following javascript files are concatenated in distributed owl.carousel.js and owl.carousel.min.js version. If you are looking for individual scripts please visit [Github]({{ pkg.homepage }}) and fork/download the source project
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
└── js/
|
|||
|
|
├── owl.animate.js
|
|||
|
|
├── owl.autoplay.js
|
|||
|
|
├── owl.autoheight.js
|
|||
|
|
├── owl.carousel.js
|
|||
|
|
├── owl.hash.js
|
|||
|
|
├── owl.lazyload.js
|
|||
|
|
├── owl.navigation.js
|
|||
|
|
└── owl.video.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> [See demos of built-in plugins](../demos/demos.html#using-built-in-plugins)
|
|||
|
|
|
|||
|
|
------
|
|||
|
|
|
|||
|
|
Big thanks to [Artus Kolanowski](https://github.com/witrin) for helping me with modular structure and for providing best practice with developing the code.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
{{!--
|
|||
|
|
|
|||
|
|
## owl.lazyload.js
|
|||
|
|
|
|||
|
|
LazyLoad require `class="owl-lazy"` and link to image inside data: data-src="url_to_img" or/and data-src-retina="url_to_highres_img".
|
|||
|
|
There is also option to load images into background but this needs to be tested. [See demo](/demos/demo.html)
|
|||
|
|
|
|||
|
|
Usage:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
$('.owl-carousel').owlCarousel({
|
|||
|
|
lazyLoad:true
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
HTML Markup:
|
|||
|
|
```
|
|||
|
|
<div class="owl-carousel">
|
|||
|
|
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
|
|||
|
|
<img class="owl-lazy" data-src-retina="https://placehold.it/350x250&text=1-retina" data-src="https://placehold.it/350x250&text=1" alt="">
|
|||
|
|
<div class="owl-lazy" data-src-retina="https://placehold.it/350x250&text=1-retina" data-src="https://placehold.it/350x250&text=1"></div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## owl.video.js
|
|||
|
|
|
|||
|
|
Currently support YouTube, Vimeo, and vzaar videos only.
|
|||
|
|
|
|||
|
|
To add video into carousel just put `<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>`.
|
|||
|
|
A tag is not mandatory, can be any other tag but `"owl-video"` and href with url link is required.
|
|||
|
|
|
|||
|
|
Thumbnails are automaticaly fetched from servers. [See demo](/demos/demo.html)
|
|||
|
|
|
|||
|
|
#### Usage:
|
|||
|
|
```
|
|||
|
|
$('.owl-carousel').owlCarousel({
|
|||
|
|
video:true,
|
|||
|
|
videoHeight:200, //optional
|
|||
|
|
videoWidth: 200 //optional
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
#### HTML Markup:
|
|||
|
|
```
|
|||
|
|
<div class="owl-carousel">
|
|||
|
|
<div class="article-video"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
|
|||
|
|
<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
|
|||
|
|
<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
|
|||
|
|
<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## owl.autoheight.js
|
|||
|
|
|
|||
|
|
Adjusts stage height to highest element on viewport. No special HTML markup required. [See demo](/demos/demo.html)
|
|||
|
|
|
|||
|
|
#### Usage:
|
|||
|
|
```
|
|||
|
|
$('.owl-carousel').owlCarousel({
|
|||
|
|
autoHeight:true,
|
|||
|
|
autoHeightClass: 'owl-height' //default
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## owl.animate.js
|
|||
|
|
|
|||
|
|
Owl Carousel CSS has built-in only fade out transition. To get more fancy looking animations you have to create them yourself in CSS or use fantastic Animate.css library created by Daniel Eden https://daneden.github.io/animate.css/
|
|||
|
|
Animate functions works only with one item and only in browsers that support perspective property.
|
|||
|
|
|
|||
|
|
To get fade out effect just set `animateOut: 'fadeOut'`
|
|||
|
|
|
|||
|
|
#### Default options:
|
|||
|
|
```
|
|||
|
|
animateOut:false;
|
|||
|
|
animateIn:false;
|
|||
|
|
```
|
|||
|
|
Read more on demo page. --}}
|
|||
|
|
|
|||
|
|
{{/markdown }}
|
|||
|
|
|