ZiffyHomeDelivery
traduction - Brasil Pt-Br
Css:
/* BANNER ROTATIVO LOJA */
@keyframes carousel{
0% { left:0; }
11% { left:0; }
12.5% { left:-100%; }
23.5% { left:-100%; }
25% { left:-200%; }
36% { left:-200%; }
37.5% { left:-300%; }
48.5% { left:-300%; }
50% { left:-400%; }
61% { left:-400%; }
62.5% { left:-300%; }
73.5% { left:-300%; }
75% { left:-200%; }
86% { left:-200%; }
87.5% { left:-100%; }
98.5% { left:-100%; }
100% { left:0; }
}
@keyframes go{
0% { }
100% { left:-300%; }
}
@keyframes back{
0% { left:0; }
100% { left:100%; }
}
.carousel{
width:100%;
overflow:hidden;
height:100%;
text-align: center;
}
.paineis{
width:500% /* article w * 5 */;
overflow:hidden;
height:100%;
animation:carousel 30s infinite; position:relative;
}
article{
float:left;
width:20%;
}
E você insere em Meta Dados, no codeview
<section class="carousel">
<div class="paineis">
<article class="page1" style="text-align: center;"><img src="/assets/img/bannerdaslojas/7.jpg" style="width:93%" alt=""></article>
<article class="page2" style="text-align: center;"><img src="/assets/img/bannerdaslojas/8.jpg" style="width:93%" alt=""></article>
<article class="page3" style="text-align: center;"><img src="/assets/img/bannerdaslojas/9.jpg" style="width:93%" alt=""></article>
<article class="page4" style="text-align: center;"><img src="/assets/img/bannerdaslojas/4.jpg" style="width:93%" alt=""></article>
<article class="page5" style="text-align: center;"><img src="/assets/img/bannerdaslojas/5.jpg" style="width:93%" alt=""></article>
</div>
</section>
