Blawdi Posted October 8, 2014 Share Posted October 8, 2014 (edited) hello,I would like to include a Slider full CSS however when I place it in the header.tpl function slider does not work, it does bug the script as soon as it starts.The method works by iframe , so I guess it's smarty , here are my two codesthank you <!-- Start cssSlider.com --> <!-- Added on global.css <link rel="stylesheet" href="cssslider/engine1/style.css">--> <!--[if IE]><link rel="stylesheet" href="cssslider/engine1/ie.css"><![endif]--> <!--[if lte IE 9]><script type="text/javascript" src="cssslider/engine1/ie.js"></script><![endif]--> <div class='csslider1 autoplay' style="margin: auto; display: block;width: 1070px;text-align: center;"> <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' autocomplete="off"> <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' autocomplete="off"> <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' autocomplete="off"> <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked autocomplete="off"> <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause' autocomplete="off"> <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause' autocomplete="off"> <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause' autocomplete="off"> <ul> <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"> <img src="cssslider/data1/images/85eaa4735965de2b495f59be4817a60b.png" style="width: 100%;"> </div> <li class='num0 img'> <a href="http://www.eliquide-import.eu/99-mythos" target="_self"><img src='cssslider/data1/images/85eaa4735965de2b495f59be4817a60b.png' alt='Mythos le nectare des dieux' title='Mythos le nectare des dieux' /> </a> </li> <li class='num1 img'> <a href="http://www.eliquide-import.eu/100-mountain-oak" target="_self"><img src='cssslider/data1/images/85bb65d07808ae42ea638203a6d13394.png' alt='Moutain Oak Vapors' title='Moutain Oak Vapors' /> </a> </li> <li class='num2 img'> <a href="http://www.eliquide-import.eu/35-ragtime" target="_self"><img src='cssslider/data1/images/a1fd2dc97451fae7a654af999ce6bab6.png' alt='Ragtime Vapor' title='Ragtime Vapor' /> </a> </li> </ul> <a class="cs_lnk" href="http://cssslider.com">image slider</a> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Mythos le nectare des dieux</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Des E-liquides conçu pour drippers, mods etc... De la performence dans votre vape!</span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">Moutain Oak Vapors</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Nombreuse fois récompensé dans le magasine Spinfuel Award! Vous cherchez des E-liquides aux goûts riches et délicieux? Ne cherchez plus!</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Ragtime Vapor</span></span> <br/><span class="cs_descr"><span class="cs_wrapper">Saveurs inédites, des goûts uniques! Vapotez différament! </span></span> </label> </div> <div class='cs_play_pause'> <label class='cs_play' for='cs_play1'><span><i></i></span></label> <label class='cs_pause num0' for='cs_pause1_0'><span><i></i></span></label> <label class='cs_pause num1' for='cs_pause1_1'><span><i></i></span></label> <label class='cs_pause num2' for='cs_pause1_2'><span><i></i></span></label> </div> <div class='cs_arrowprev'> <label class='num0' for='cs_slide1_0'><span><i></i></span></label> <label class='num1' for='cs_slide1_1'><span><i></i></span></label> <label class='num2' for='cs_slide1_2'><span><i></i></span></label> </div> <div class='cs_arrownext'> <label class='num0' for='cs_slide1_0'><span><i></i></span></label> <label class='num1' for='cs_slide1_1'><span><i></i></span></label> <label class='num2' for='cs_slide1_2'><span><i></i></span></label> </div> <div class='cs_bullets'> <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span> <span class='cs_thumb'><img src='cssslider/data1/tooltips/85eaa4735965de2b495f59be4817a60b.png' alt='Mythos le nectare des dieux' title='Mythos le nectare des dieux' /></span> </label> <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span> <span class='cs_thumb'><img src='cssslider/data1/tooltips/85bb65d07808ae42ea638203a6d13394.png' alt='Moutain Oak Vapors' title='Moutain Oak Vapors' /></span> </label> <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span> <span class='cs_thumb'><img src='cssslider/data1/tooltips/a1fd2dc97451fae7a654af999ce6bab6.png' alt='Ragtime Vapor' title='Ragtime Vapor' /></span> </label> </div> </div> <!-- End cssSlider.com --> Css: @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese); @font-face { font-family: "basiccontrols"; src: url("basiccontrols.eot"); src: url("basiccontrols.eot#iefix") format("embedded-opentype"), url("basiccontrols.woff") format("woff"), url("basiccontrols.ttf") format("truetype"), url("basiccontrols.svg#basic") format("svg"); font-weight: normal; font-style: normal; } .csslider1 { display: inline-block; position: relative; max-width: 1070px; width: 100%; margin-top: 10px; } .csslider1 > .cs_anchor { display: none; } .csslider1 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider1 > ul > li.img img { width: 100%; } .csslider1 > ul > li.img { font-size: 0pt; } .csslider1 > ul > li { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; white-space: normal; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .csslider1 .cs_lnk{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider1 > ul > li.img, .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext, .csslider1 > .cs_bullets, .csslider1 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.csslider1 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider1 > .cs_bullets > div { ; width: 100%; } .csslider1 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider1 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -85.5px; top: -48px; } .csslider1 > .cs_bullets > label > .cs_thumb > img { max-width: none; }.csslider1 > .cs_description { z-index: 3; } .csslider1 > .cs_description a, .csslider1 > .cs_description a:visited, .csslider1 > .cs_description a:active { color: inherit; } .csslider1 > .cs_description a:hover { text-decoration: none; } .csslider1 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider1 > .cs_description > label > span { vertical-align: top; } .csslider1 > .cs_description > label span { display: inline-block; }.csslider1 > ul > li.num0 { left: 0%; } .csslider1 > ul > li.num1 { left: 100%; } .csslider1 > ul > li.num2 { left: 200%; } .csslider1 > #cs_slide1_0:checked ~ ul > li, .csslider1 > #cs_pause1_0:checked ~ ul > li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .csslider1 > #cs_slide1_1:checked ~ ul > li, .csslider1 > #cs_pause1_1:checked ~ ul > li { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .csslider1 > #cs_slide1_2:checked ~ ul > li, .csslider1 > #cs_pause1_2:checked ~ ul > li { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } .csslider1 > ul > li { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms cubic-bezier(0.4, 1.3, 0.65, 1); -moz-transition: -moz-transform 2000ms cubic-bezier(0.4, 1.3, 0.65, 1); -ms-transition: -ms-transform 2000ms cubic-bezier(0.4, 1.3, 0.65, 1); -o-transition: -o-transform 2000ms cubic-bezier(0.4, 1.3, 0.65, 1); transition: transform 2000ms cubic-bezier(0.4, 1.3, 0.65, 1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* calculate autoplay */ @-webkit-keyframes slide { 0%, 25% { -webkit-transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); } } @-moz-keyframes slide { 0%, 25% { -moz-transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -moz-transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -moz-transform: translateX(-200%); } } @-ms-keyframes slide { 0%, 25% { -ms-transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -ms-transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -ms-transform: translateX(-200%); } } @-o-keyframes slide { 0%, 25% { -o-transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -o-transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -o-transform: translateX(-200%); } } @keyframes slide { 0%, 25% { transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { transform: translateX(-200%); } } .csslider1 > #cs_play1:checked ~ ul > li { -webkit-animation: slide 24000ms infinite; -moz-animation: slide 24000ms infinite; -ms-animation: slide 24000ms infinite; -o-animation: slide 24000ms infinite; animation: slide 24000ms infinite; } .csslider1 > #cs_play1:checked ~ ul > li, .csslider1 > .pause:checked ~ ul > li { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* /calculate autoplay */ .csslider1 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider1 > .cs_bullets > label { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 5px; padding: 9px; background: #609b2c; } .csslider1 > .cs_bullets > label > .cs_thumb { border: 3px solid #609b2c; margin-top: -150%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .csslider1 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; ; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #609b2c; } .csslider1 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider1 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; ; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider1 > .cs_bullets > label:hover > .cs_point, .csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } /* calculate autoplay */ @-webkit-keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-moz-keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-ms-keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-o-keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet 24000ms infinite -2000ms; -moz-animation: bullet 24000ms infinite -2000ms; -ms-animation: bullet 24000ms infinite -2000ms; -o-animation: bullet 24000ms infinite -2000ms; animation: bullet 24000ms infinite -2000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet 24000ms infinite 6000ms; -moz-animation: bullet 24000ms infinite 6000ms; -ms-animation: bullet 24000ms infinite 6000ms; -o-animation: bullet 24000ms infinite 6000ms; animation: bullet 24000ms infinite 6000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet 24000ms infinite 14000ms; -moz-animation: bullet 24000ms infinite 14000ms; -ms-animation: bullet 24000ms infinite 14000ms; -o-animation: bullet 24000ms infinite 14000ms; animation: bullet 24000ms infinite 14000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* stop */ .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* /calculate autoplay */ .csslider1 > .cs_description > label { font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; line-height: normal; bottom: 40px; left: 10px; } .csslider1 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_title, .csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_title, .csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title, .csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_title, .csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title, .csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_title, .csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .csslider1 > .cs_description > label > .cs_title { background-color: #609b2c; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -moz-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -ms-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -o-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 > .cs_description > label > .cs_descr { background-color: #b0cd96; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -moz-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -ms-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -o-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -moz-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -ms-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -o-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -moz-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -ms-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -ms-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -o-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } /* calculate autoplay */ @-webkit-keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); z-index: 2; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); z-index: 2; visibility: visible;} 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); z-index: 2; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-moz-keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -moz-transform: translateY(10px); z-index: 2; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -moz-transform: translateY(0px); z-index: 2; visibility: visible;} 35.3125% { opacity: 0; -moz-transform: translateY(-100px); z-index: 2; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-ms-keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -ms-transform: translateY(10px); z-index: 2; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -ms-transform: translateY(0px); z-index: 2; visibility: visible;} 35.3125% { opacity: 0; -ms-transform: translateY(-100px); z-index: 2; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-o-keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -o-transform: translateY(10px); z-index: 2; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -o-transform: translateY(0px); z-index: 2; visibility: visible;} 35.3125% { opacity: 0; -o-transform: translateY(-100px); z-index: 2; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; transform: translateY(10px); z-index: 2; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; transform: translateY(0px); z-index: 2; visibility: visible;} 35.3125% { opacity: 0; transform: translateY(-100px); z-index: 2; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); z-index: 1; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); z-index: 1; visibility: visible;} 35.3125% { opacity: 0; -webkit-transform: translateY(100px); z-index: 1; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-moz-keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -moz-transform: translateY(-10px); z-index: 1; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -moz-transform: translateY(0px); z-index: 1; visibility: visible;} 35.3125% { opacity: 0; -moz-transform: translateY(100px); z-index: 1; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-ms-keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -ms-transform: translateY(-10px); z-index: 1; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -ms-transform: translateY(0px); z-index: 1; visibility: visible;} 35.3125% { opacity: 0; -ms-transform: translateY(100px); z-index: 1; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @-o-keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -o-transform: translateY(-10px); z-index: 1; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; -o-transform: translateY(0px); z-index: 1; visibility: visible;} 35.3125% { opacity: 0; -o-transform: translateY(100px); z-index: 1; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; transform: translateY(-10px); z-index: 1; visibility: visible;} 1.9791666666666667%, 31.344166666666666% { opacity: 1; transform: translateY(0px); z-index: 1; visibility: visible;} 35.3125% { opacity: 0; transform: translateY(100px); z-index: 1; visibility: hidden;} 35.3225%, 100% { z-index: 0; } } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title 24000ms infinite -1400ms ease; -moz-animation: cs_title 24000ms infinite -1400ms ease; -ms-animation: cs_title 24000ms infinite -1400ms ease; -o-animation: cs_title 24000ms infinite -1400ms ease; animation: cs_title 24000ms infinite -1400ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title 24000ms infinite 6600ms ease; -moz-animation: cs_title 24000ms infinite 6600ms ease; -ms-animation: cs_title 24000ms infinite 6600ms ease; -o-animation: cs_title 24000ms infinite 6600ms ease; animation: cs_title 24000ms infinite 6600ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title 24000ms infinite 14600ms ease; -moz-animation: cs_title 24000ms infinite 14600ms ease; -ms-animation: cs_title 24000ms infinite 14600ms ease; -o-animation: cs_title 24000ms infinite 14600ms ease; animation: cs_title 24000ms infinite 14600ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite -1150ms ease; -moz-animation: cs_descr 24000ms infinite -1150ms ease; -ms-animation: cs_descr 24000ms infinite -1150ms ease; -o-animation: cs_descr 24000ms infinite -1150ms ease; animation: cs_descr 24000ms infinite -1150ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite 6850ms ease; -moz-animation: cs_descr 24000ms infinite 6850ms ease; -ms-animation: cs_descr 24000ms infinite 6850ms ease; -o-animation: cs_descr 24000ms infinite 6850ms ease; animation: cs_descr 24000ms infinite 6850ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite 14850ms ease; -moz-animation: cs_descr 24000ms infinite 14850ms ease; -ms-animation: cs_descr 24000ms infinite 14850ms ease; -o-animation: cs_descr 24000ms infinite 14850ms ease; animation: cs_descr 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); } } @-moz-keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -moz-transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -moz-transform: translateY(0px); } 35.3125% { opacity: 0; -moz-transform: translateY(-100px); } } @-ms-keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -ms-transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -ms-transform: translateY(0px); } 35.3125% { opacity: 0; -ms-transform: translateY(-100px); } } @-o-keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -o-transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -o-transform: translateY(0px); } 35.3125% { opacity: 0; -o-transform: translateY(-100px); } } @keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; transform: translateY(0px); } 35.3125% { opacity: 0; transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); } } @-moz-keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -moz-transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -moz-transform: translateY(0px); } 35.3125% { opacity: 0; -moz-transform: translateY(100px); } } @-ms-keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -ms-transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -ms-transform: translateY(0px); } 35.3125% { opacity: 0; -ms-transform: translateY(100px); } } @-o-keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -o-transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -o-transform: translateY(0px); } 35.3125% { opacity: 0; -o-transform: translateY(100px); } } @keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; transform: translateY(0px); } 35.3125% { opacity: 0; transform: translateY(100px); } } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite -1250ms ease; -moz-animation: cs_title_text 24000ms infinite -1250ms ease; -ms-animation: cs_title_text 24000ms infinite -1250ms ease; -o-animation: cs_title_text 24000ms infinite -1250ms ease; animation: cs_title_text 24000ms infinite -1250ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite 6750ms ease; -moz-animation: cs_title_text 24000ms infinite 6750ms ease; -ms-animation: cs_title_text 24000ms infinite 6750ms ease; -o-animation: cs_title_text 24000ms infinite 6750ms ease; animation: cs_title_text 24000ms infinite 6750ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite 14750ms ease; -moz-animation: cs_title_text 24000ms infinite 14750ms ease; -ms-animation: cs_title_text 24000ms infinite 14750ms ease; -o-animation: cs_title_text 24000ms infinite 14750ms ease; animation: cs_title_text 24000ms infinite 14750ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite -1000ms ease; -moz-animation: cs_descr_text 24000ms infinite -1000ms ease; -ms-animation: cs_descr_text 24000ms infinite -1000ms ease; -o-animation: cs_descr_text 24000ms infinite -1000ms ease; animation: cs_descr_text 24000ms infinite -1000ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite 7000ms ease; -moz-animation: cs_descr_text 24000ms infinite 7000ms ease; -ms-animation: cs_descr_text 24000ms infinite 7000ms ease; -o-animation: cs_descr_text 24000ms infinite 7000ms ease; animation: cs_descr_text 24000ms infinite 7000ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite 15000ms ease; -moz-animation: cs_descr_text 24000ms infinite 15000ms ease; -ms-animation: cs_descr_text 24000ms infinite 15000ms ease; -o-animation: cs_descr_text 24000ms infinite 15000ms ease; animation: cs_descr_text 24000ms infinite 15000ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title, .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr, .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider1 > .pause:checked ~ .cs_description > label > .cs_title, .csslider1 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider1 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider1 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* /calculate autoplay *//* hide description & bullets on mobile devices */ @media only screen and (max-width: 480px), only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( max--moz-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( -o-max-device-pixel-ratio: 2/1) and (max-width: 480px), only screen and ( max-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( max-resolution: 192dpi) and (max-width: 480px), only screen and ( max-resolution: 2dppx) and (max-width: 480px) { .csslider1 > .cs_description, .csslider1 > .cs_bullets { display: none; } } Edited October 8, 2014 by Bladinium (see edit history) Link to comment Share on other sites More sharing options...
Blawdi Posted October 8, 2014 Author Share Posted October 8, 2014 ? :/ Link to comment Share on other sites More sharing options...
Programmers Direct Posted October 8, 2014 Share Posted October 8, 2014 I honestly dont know how to begin with this honestly as there is so much to go over and I would recommend activating debug mode to see the error code displayed as it is the most accurate way to troubleshoot your code. I will look over the code to see whats wrong but no guarantee i will find it as it sometimes is like finding a needle in a haystack and easily overlooked. There are many free sliders as well as many paid ones that are 100% working i would suggest that above all as many people share free modules here in the forum and paid versions are found at .http://addons.prestashop.com/ Link to comment Share on other sites More sharing options...
Programmers Direct Posted October 8, 2014 Share Posted October 8, 2014 there are way to many errors showing to covey a solution, as some may just be the editor but there are many errors types showing as well so please copy and paste into an editor with syntax check and you will see some css errors as well as others displaying. I will say it is better to buy or use a free slider. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now