Youtube movies slider on homepage - free Prestashop tutorial

Today i want to show you how to create own simple YouTube movies slider located in your hompage. This simple tutorial is absolutely free and you will be able to create it by using our free solution which allows you to add any code you want: html block prestashop module for free

How YouTube movies slider will looks ? 

First step: install our free html block module  

Download our free module and install it in your shop back office. Next you must change position of this module in displayHome hook. Just go to the modules › Positions  tab in your back office and move our html box free module to the first place in displayHome hook. If you changed module position properly - you can create slider code now. Just back to the modules section and configure our module. After clicking on "configure" button you will see module configuration page. Select "Home" hook and now you can read next step, where we will talk about slider code. exactly as we show on image below:

Create the code of YouTube movie slider

JavaScript

<script type="text/javascript">
 $(document).ready(function () {
 $("#freeslider").fadeIn(500);
 $("#1").fadeIn(500);
 $("#controle1").click(function (e) {
 $("#1").fadeIn();
 $("#2").fadeOut();
 $("#3").fadeOut();
 });
 $("#controle2").click(function (e) {
 $("#1").fadeOut();
 $("#2").fadeIn();
 $("#3").fadeOut();
 });
 $("#controle3").click(function (e) {
 $("#1").fadeOut();
 $("#2").fadeOut();
 $("#3").fadeIn();
 });
 });
</script>

CSS Styles

<style>
 #freesliderbody {
 text-align;
 center;
 font-family: arial;
 font-size: 50px;
 background:#f2f2f2;
 border:1px solid #c0c0c0;
 }
 #freeslider {
 width:440px;
 height:460px;
 margin: 0 auto;
 margin-bottom:20px;
 display:block;
 clear:both;
 overflow:hidden;
 }
 #ytb {
 width:440px;
 display:block;
 margin:auto;
 clear:both;
 overflow:hidden;
 }
 #freeslider.shide {
 display: none;
 width:440px;
 margin:auto;
 }
 #freeslider iframe {
 margin:auto;
 position:absolute;
 clear:both;
 }
 #freeslider ul li {
 cursor:pointer;
 margin: 0 15px;
 display: inline;
 height:30px;
 line-height:30px;
 color:#c0c0c0;
 }
 #freeslider ul li:hover {
 color:#000000;
 }
 #freeslider ul {
 height: 30px;
 margin: 0px;
 padding: 10px;
 text-align: center;
 }
 #freeslider:first-child {
 position: relative;
 }
 #freeslider a {
 text-decoration: none;
 color: #B2B2B2;
 }
 #freeslider a:hover {
 color: #CCCCCC;
 }
 a {
 text-decoration: none;
 color: #B2B2B2;
 }
 #freeslider a:hover {
 color: #CCCCCC;
 }
</style>

Html Code

<div id="freesliderbody">
 <div id="freeslider">
 <ul>
 <li id="controle1">&bull;</li>
 <li id="controle2">&bull;</li>
 <li id="controle3">&bull;</li>
 </ul>
 <div id="1" class="shide">
 <iframe id="player" src="https://youtube.com/embed/RF0HhrwIwp0" frameborder="0" width="440" height="390"></iframe>
 </div>
 <div id="2" class="shide">
 <iframe id="player" src="https://youtube.com/embed/1G4isv_Fylg" frameborder="0" width="440" height="390"></iframe>
 </div>
 <div id="3" class="shide">
 <iframe id="player" src="https://youtube.com/embed/gGdGFtwCNBE" frameborder="0" width="440" height="390"></iframe>
 </div>
 </div>
</div>

Personalization

If you want to display own videos, just change src="" param for iframe elements above. You can of course change width and height of movie window or slider too. All you have to do is copy code that i pasted above into html box free contet window.