This time I will share jQuery Plugin and tutorial about Create A Youtube Video Carousel With OWL Carousel Plugin, hope it will help you in programming stack.
The jQuery OWL Tube 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.
Licenced under the GPL 3.
How to use it:
1. Load the necessary jQuery library and Owl Carousel plugin in the document.
2 |
< link rel = "stylesheet" href = "/path/to/owl.carousel.min.css" > |
3 |
< link rel = "stylesheet" href = "/path/to/owl.theme.default.min.css" > |
4 |
< link rel = "stylesheet" href = "/path/to/owl.theme.green.min.css" > |
6 |
< script src = "/path/to/jquery-3.3.1.min.js" ></ script > |
7 |
< script src = "/path/to/owl.carousel.min.js" ></ script > |
2. Download and load the minified version of the jQuery OWL Tube plugin after jQuery.
1 |
< script src = "/dist/assets/js/owl-tube.min.js" ></ script > |
3. Insert Youtube videos to the carousel following the markup structure as these:
01 |
< div class = "owl-carousel owl-theme" > |
03 |
< iframe type = "text/html" width = "720" height = "405" |
05 |
frameborder = "0" allowfullscreen></ iframe > |
08 |
< iframe type = "text/html" width = "720" height = "405" |
10 |
frameborder = "0" allowfullscreen></ iframe > |
13 |
< iframe type = "text/html" width = "720" height = "405" |
15 |
frameborder = "0" allowfullscreen></ iframe > |
19 |
< iframe type = "text/html" width = "720" height = "405" |
21 |
frameborder = "0" allowfullscreen></ iframe > |
4. Initialize the Youtube playlist carousel and done.
01 |
var carousel = $( '.owl-carousel' ).owlCarousel({ |
12 |
window.owlTube = $(carousel).owlTube(); |
5. Available configurations for the Youtube playlist carousel.
About Author:
Author: kia
Website: https://dialogo.digital/public/projects/owl-tube/example/
This awesome jQuery plugin is developed by kiaonline. For more Advanced Usages, please check the demo page or visit the official website.