Do you want to add youtube video slideshow on your website to showcase your video gallery or display youtube video Carouselon your website If yes then in this post I am going to share awesome jQuery plugin called OWL Tube. This plugin makes use of the popular Owl Carousel 2 plugin to create a responsive, configurable Youtube playlist carousel from a group of Youtube videos you specify.
Libraries
Load the necessary jQuery library and Owl Carousel plugin in the document.
<link rel="stylesheet" href="../vendors/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="../vendors/owl-carousel/assets/owl.carousel.min.css"> <link rel="stylesheet" href="../vendors/owl-carousel/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="../vendors/owl-carousel/assets/owl.theme.green.min.css"> <script src="../vendors/jquery/jquery-3.3.1.min.js">script> <script src="../vendors/bootstrap/popper.min.js">script> <script src="../vendors/bootstrap/bootstrap.min.js">script> <script src="../vendors/owl-carousel/owl.carousel.min.js">script> <script src="../dist/assets/js/owl-tube.min.js">script> |
HTML
Add Youtube videos to the carousel by following structure.
|
JS
Initialize the OWL Carousel Youtube Plugin to create video slider and done.
$(document).ready(function(){ var carousel = $('.owl-carousel').owlCarousel({ items:1, loop:1, nav:1, dots:1 }); window.owlTube = $(carousel).owlTube(); }); |
See live demo and download source code.
This awesome plugin is developed by kiaonline. Visit their official github repository for more information and follow for future updates.
