gracias
Estoy usando un código CSS el cual vi en un tutorial,en principio estaba pensado para 10 logos, yo he modificado para 16 en bloques de 4 hasta donde buenamente he podido, la primera vez que recargo la pagina, salen todos seguidos, pero cuando llega el cuarto bloque de 4 logos, aparece el segundo bloque tapado justo debajo del cuarto y entonces empiezan a repetirse el tercer y cuarto bloque (apareciendo el segundo tapado por el cuarto ) y no vuelve a empezar del principio y hasta aquí he probado a cambiar mil cosas pero ninguna sin resultado, ahora mismo estoy perdido, no se que tendría que modificar.
os lo agradezco de antemano.
/*Stops the browser creating a horizontal scrollbar*/
.ds-carousel-section {
overflow: hidden;
max-height: 180px;
}
/*Reduces the section height on mobiles*/
@media only screen and (max-width: 567px) {
.ds-carousel-section {
max-height: 140px;
padding: 0;
}
}
/*Sets the width of the image modules and floats them so they are next to each other*/
.ds-carousel-logo {
width: 25%;
float: left;
}
/*Sets the layout for the first row*/
.ds-image-carousel-first {
width: 100% !important;
max-height: 200px;
height: 200px;
background: #fff;
animation: 15s first 1 linear;
animation-fill-mode: forwards;
}
/*Sets the layout for the second row*/
.ds-image-carousel-second {
z-index: 2;
height: 200px;
background: #fff;
width: 100% !important;
float: left;
display: inline-block;
top: -200px;
animation: 30s second infinite linear;
}
/*Sets the layout for the third row*/
.ds-image-carousel-third {
z-index: 3;
height: 200px;
background: #fff;
width: 100% !important;
float: left;
display: inline-block;
top: -400px;
animation: 30s third infinite linear;
animation-delay: 15s;
opacity: 0;
}
/*Sets the layout for the fourth row*/
.ds-image-carousel-fourth {
z-index: 4;
height: 200px;
background: #fff;
width: 100% !important;
float: left;
display: inline-block;
top: -600px;
animation: 30s fourth infinite linear;
animation-delay: 30s;
opacity: 0;
}
/*Animation for the continuous scrolling effect*/
@keyframes first {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
z-index: 4;
}
99.99% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
z-index: 4;
}
100% {
z-index: -1;
}
}
@keyframes second {
0% {
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes third {
0.1% {
opacity: 0;
}
0.2% {
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 1;
}
100% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}
}
@keyframes fourth {
0.1% {
opacity: 0;
}
0.2% {
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 1;
}
100% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}
}
/*-----------------------------------------------*/
/*---End Scrolling Image Carousel by Divi Soup---*/
/*---------------------------------------------
