2. Visit Template, then Edit HTML
3. Copy the following code to the bottom of the <head>
CSS
===========
<link href='https://cdn.rawgit.com/RithiSethTes/Youtube-Videos-Slider/master/youtubeskin2.css' rel='stylesheet' type='text/css'/>
4. Copy the following code above the </ body>
JAVASCRIPT
===================
<script src='https://code.jquery.com/jquery-1.11.2.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/RithiSethTes/Youtube-Videos-Slider/master/youtubehtml1.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/RithiSethTes/Youtube-Videos-Slider/master/youtubehtml2.js' type='text/javascript'></script>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#gallery").unitegallery({
gallery_width:900, //gallery width
gallery_height:500, //gallery height
gallery_min_width: 400, //gallery minimal width when resizing
gallery_min_height: 300, //gallery minimal height when resizing
gallery_theme:"default", //default,compact,grid,slider - select your desired theme from the list of themes.
gallery_skin:"default", //default, alexis etc... - the global skin of the gallery. Will change all gallery items by default.
gallery_images_preload_type:"minimal", //all , minimal , visible - preload type of the images.
//minimal - only image nabours will be loaded each time.
//visible - visible thumbs images will be loaded each time.
//all - load all the images first time.
gallery_autoplay:true, //true / false - begin slideshow autoplay on start
gallery_play_interval: 3000, //play interval of the slideshow
gallery_pause_on_mouseover: true, //true,false - pause on mouseover when playing slideshow true/false
gallery_control_thumbs_mousewheel:false, //true,false - change this option, add more mousewheel choices
gallery_control_keyboard: true, //true,false - enable / disble keyboard controls
gallery_carousel:true, //true,false - next button on last image goes to first image.
gallery_preserve_ratio: true, //true, false - preserver ratio when on window resize
gallery_debug_errors:true, //show error message when there is some error on the gallery area.
gallery_background_color: "" //set custom background color. If not set it will be taken from css.
});
});
</script>
Please correct the code above: -Width: gallery_width: 900 (the width of the YouTube video) // gallery_height: 500, height (the size of YouTube videos) // gallery_play_interval: 3000, (the speed of the slide), the more speed more slowly. The time is finished, click Save Template.
5. Copy the following code where you want the YouTube video, slide show
HTML
===============
<div id="gallery" style="display:none;"> <img alt="Youtube Video 1" data-type="youtube" data-videoid="d4y5l5G0d6o" data-description="Your Videos Title" /> <img alt="Youtube Video 2" data-type="youtube" data-videoid="rBI9IuHk3LQ" data-description="Your Videos Title" /><img alt="Youtube Video 3" data-type="youtube" data-videoid="TUtCSUZgJoQ" data-description="Your Videos Title" /> <img alt="Youtube Video 4" data-type="youtube" data-videoid="H0GBHDKZ4As" data-description="Your Videos Title" /><img alt="Youtube Video 5" data-type="youtube" data-videoid="GPZeWXLTcL0" data-description="Your Videos Title" /> <img alt="Youtube Video 6" data-type="youtube" data-videoid="G7TPTKd45U4" data-description="Your Videos Title" /> <img alt="Youtube Video 7" data-type="youtube" data-videoid="DEAUkcQZI50" data-description="Your Videos Title" /><img alt="Youtube Video 8" data-type="youtube" data-videoid="Pung6dsJTHo" data-description="Your Videos Title" /> <img alt="Youtube Video 9" data-type="youtube" data-videoid="-UyOgNYeqdk" data-description="Your Videos Title" /><img alt="Youtube Video 10" data-type="youtube" data-videoid="-R9ITauiSRE" data-description="Your Videos Title" /><img alt="Youtube Video 11" data-type="youtube" data-videoid="_w1fRPK4vW8" data-description="Your Videos Title" /> <img alt="Youtube Video 12" data-type="youtube" data-videoid="6ExVzFuCSoo" data-description="Your Videos Title" /> <img alt="Youtube Video 13" data-type="youtube" data-videoid="SUV9r8ifdvg" data-description="Your Videos Title" /> <img alt="Youtube Video 14" data-type="youtube" data-videoid="FSeSt9BB8j0" data-description="Your Videos Title" /> <img alt="Youtube Video 15" data-type="youtube" data-videoid="l_FxWI9m6q8" data-description="Your Videos Title" /></div>
Please correct the code above:
-data-videoid = " 6ExVzFuCSoo " // YouTube videos ID -data-description = " Your Videos Title " /> // Video Title
