1---
2title: Built-in Plugins
3subTitle: Development
4nav: docs
5description: Owl Carousel Documentation
6
7sort: 1
8tags:
9- Development
10---
11
12{{#markdown }}
13## Built-in Plugins
14> 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
15
16
17
18### Plugins included
19
20Following 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
21
22
23```
24src/
25└── js/
26	├── owl.animate.js
27    ├── owl.autoplay.js
28    ├── owl.autoheight.js
29    ├── owl.carousel.js
30    ├── owl.hash.js
31    ├── owl.lazyload.js
32    ├── owl.navigation.js
33    └── owl.video.js
34```
35
36> [See demos of built-in plugins](../demos/demos.html#using-built-in-plugins)
37
38------
39
40Big thanks to [Artus Kolanowski](https://github.com/witrin) for helping me with modular structure and for providing best practice with developing the code.
41
42
43
44
45
46{{!--
47
48## owl.lazyload.js
49
50LazyLoad require `class="owl-lazy"` and link to image inside data: data-src="url_to_img" or/and data-src-retina="url_to_highres_img".
51There is also option to load images into background but this needs to be tested. [See demo](/demos/demo.html)
52
53Usage:
54
55```
56$('.owl-carousel').owlCarousel({
57	lazyLoad:true
58});
59```
60HTML Markup:
61```
62<div class="owl-carousel">
63	<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
64	<img class="owl-lazy" data-src-retina="https://placehold.it/350x250&text=1-retina" data-src="https://placehold.it/350x250&text=1" alt="">
65	<div class="owl-lazy" data-src-retina="https://placehold.it/350x250&text=1-retina" data-src="https://placehold.it/350x250&text=1"></div>
66</div>
67```
68
69## owl.video.js
70
71Currently support YouTube, Vimeo, and vzaar videos only.
72
73To add video into carousel just put `<a class="owl-video" href="_straight URL from YouTube, Vimeo, or vzaar"></a>`.
74A tag is not mandatory, can be any other tag but `"owl-video"` and href with url link is required.
75
76Thumbnails are automaticaly fetched from servers. [See demo](/demos/demo.html)
77
78#### Usage:
79```
80$('.owl-carousel').owlCarousel({
81	video:true,
82	videoHeight:200, //optional
83	videoWidth: 200 //optional
84});
85```
86#### HTML Markup:
87```
88<div class="owl-carousel">
89	<div class="article-video"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
90	<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
91	<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
92	<div class="article-video"><a class="owl-video" href="https://www.youtube.com/watch?v=oy18DJwy5lI"></a></div>
93</div>
94```
95
96## owl.autoheight.js
97
98Adjusts stage height to highest element on viewport. No special HTML markup required. [See demo](/demos/demo.html)
99
100#### Usage:
101```
102$('.owl-carousel').owlCarousel({
103	autoHeight:true,
104	autoHeightClass: 'owl-height' //default
105});
106```
107
108## owl.animate.js
109
110Owl 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/
111Animate functions works only with one item and only in browsers that support perspective property.
112
113To get fade out effect just set `animateOut: 'fadeOut'`
114
115#### Default options:
116```
117animateOut:false;
118animateIn:false;
119```
120Read more on demo page. --}}
121
122{{/markdown }}
123
124