CSS - Automatic Slideshow con transiciones descompensadas

Buenas amigos. He puesto un Slideshow a mi sitio y, para no complicarme mucho, he buscado algunas alternativas en las que solo esté html y css (sé que hay cosas mejores, pero ésta opción me valdría).

El caso es que usé un código que hacía lo que yo buscaba, pero era de solo 3 imágenes y, ya supongo, el número de imagenes en el Slideshow influye directamente en los resultados salvo que modifiquemos parámetros. Yo he puesto 6 imágenes y he modificado lo que creo que afecta, pero no doy con los datos precisos para que la secuencia de cada imagen sea correlativa, que pase de una imagen a otra, cada X tiempo, y con el mismo tiempo de transición. El resultado es que algunas están más tiempo mostrándose, otras apenas aparecen unos instantes y se desvanecen y no queda todo lo bien que me gustaría.

Así lo tengo ahora:

Ver Ejemplo

Está claro que lo que creo que hago mal está aquí:


Alquien me echa un cable?

Muchas gracias, llevo enredado con ésto un par de días y ya he conseguido mucho (para no tener ni idea), pero me he quedado atascado aquí y, aún estoy leyendo sobre el tema, no termino de entender cómo se producen las transiciones (parece que el método es el llamado "de la Opacidad", que consiste en que todas las imágenes menos una quedan totalmente invisibles y, mientras la opaca va desapareciendo empieza a aparecer la siguiente). He probado con numerosas configuraciones de animation-duration y animation-delays

Por otro lado, me gustaría saber si es posible seguir añadiendo imágenes y qué tengo que hacer para que quede correcto (ahora tengo 6, pero podría tener 8 o 10 ....)

Muchas gracias ;)

Hola,

puedes eliminar todo esto y funcionarán todas las imágenes con el mismo tiempo de animation-duration: 5s;


Un saludo!

Gracias por responder, la verdad es que, finalmente, terminé con javascript con un código sencillo y ya lo he dejado resuelto (precisamente ayer por la tarde, aunque me costó bastante cuadrar la posición de las cajas, este es todo un mundo!).

Ahora ya me funciona correctamente.

Tengo que decir, ya que el ejemplo lo sigo mantenimiento en codepen, que he probado el cambio que sugieres y el resultado no es el esperado, las transiciones siguen algo descompensadas (unas imágenes entran más rápido, otras se mantienen más tiempo, etc). Además, se añade un lapso sin imagen, con fondo blanco que se ve bastante feo.

Precisamente ayer cambié las urls de las imágenes del ejemplo, quizás por eso no has podido ver los resultados con el cambio que sugieres, pero si quieres valorarlo ahora, ahora ya con correctas las urls y ya no moveré los archivos de lugar.

Ver Ejemplo

De todas formas, no te preocupes, como te digo lo he resuelto con javascript y me es más sencillo ahora controlar el tiempo de transición y añadir todas las imágenes que quiera ;).

Gracias por la ayuda!

Adolfo

Hola,

me alegro que esté solucionado!

Como has dicho, esto de las webs es todo un mundo donde hay varias tecnologías entremezcladas, html, css, javascript por citar algunas.

Una web que va muy bién para empezar, aprender y probar con sus ejemplos es https://www.w3schools.com/

Y otra más oficial es https://developer.mozilla.org/es/

Un saludo!

Gracias!, las conozco ambas, aunque únicamente he acudido a ellas cuando he buscado algo concreto. Lo cierto es que es entretenido, y diseñar tu propia web tiene bastante aliciente, aunque sea cogiendo cosas de aquí y de allá ;)

Ahora me toca la parte de adaptabildiad o diseño responsivo, porque veo mi página en el móvil y me dan ganas de llorar,ja,ja,ja!, y eso que está basado en una plantilla previa que se adapta muy bien, pero precisamente lo que he añadido yo (el Slideshow y el título), se sale totalmente. Me pondré con ello esta tarde, voy poco a poco resolviendo las cosas que van saliendo y, de paso, voy aprendiendo también (por esa razón las cajas no se me colocaban como eran de esperar, venía de una plantilla previa con un css específico para toda la fotogalería, al no ser sencilla, habían comportamientos raros como, por ejemplo, que el título quedara por debajo del Slideshow cuando lo normal sería que estuviera al revés, tuve que añadirle un z-index: a ambos elementos para que se superpusieran como yo quería).

Lo dicho, gracias por la ayuda.