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