Comunidad de diseño web y desarrollo en internet

problema logos slider CSS

Citar            
MensajeEscrito el 20 May 2017 10:50 pm
Hola buenas, es mi primera vez aquí en el foro, y totalmente nuevo en esto del CSS, espero podáis ayudarme,
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---*/
/*---------------------------------------------

Por 1q41q42

0 de clabLevel



 

safari
Citar            
MensajeEscrito el 21 May 2017 12:50 pm
No entiendo ben lo que quieres pero ayudaría ver el html

Por jearj

41 de clabLevel



 

mozilla

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.