s Corregido: Galería de imágenes con keyframes de Webkit no muestra todas las imágenes
Eres un traductor español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzca el código ni la salida en markdown
.Image_Cont {
top: 20%;
left: 40%;
position: absolute;
width: 300px;
height: 450px;
background-color: #fff;
overflow: hidden;
}
.Scroll_Image {
top: 0%;
left: 0%;
position: absolute;
width: 100%;
height: 100%;
}
.Image {
width: 100%;
height: 100%;
position: relative;
-webkit-animation-name: slide_animation;
-webkit-animation-duration: 3s; /* se cambió de 33s por razones de demostración */
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
.Image img {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
@-webkit-keyframes slide_animation {
0% {
left: 0px;
}
10% {
left: 0px;
}
20% {
left: 300px;
}
30% {
left: 300px;
}
40% {
left: 600px;
}
50% {
left: 600px;
}
60% {
left: 300px;
}
70% {
left: 300px;
}
80% {
left: 0px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<title>Pagina principal</title>
</head>
<body>
<header>
<a href="index.html" class="header-logo"> <img src="CSS/images/Logo.jpeg" alt="Logo de BeMe"></a>
<nav>
<ul>
<li><a href="products.html">Productos</a></li>
<li><a href="about_us.html">Sobre nosotros</a></li>
<li><a href="contact_us.html">Contáctanos</a></li>
<li><a href="find_us.html">Encuéntranos</a></li>
<li><a href="basket.html">Cesta</a></li>
</ul>
</nav>
</header>
<main>
<div class="Image_Cont">
<div class="Scroll_Image">
<div class="Image">
<img src="CSS/images/Logo_Rot.jpeg" alt="Logo rotado">
</div>
<div class="Image">
<img src="CSS/images/Female_Cln.jpeg" alt="Ejemplo de clon femenino">
</div>
<div class="Image">
<img src="CSS/images/Male_Cln.jpeg" alt="Ejemplo de clon masculino">
</div>
</div>
</div>
</main>
</body>
</html>
Esto es parte de un sitio web que necesito construir para mi trabajo universitario.
La galería mostrará la primera imagen y rotará, pero no muestra la siguiente imagen, solo el color de fondo.
He intentado cambiar la animación webkit para que vaya de izquierda a derecha, pero no funcionó.
El código se valida sin errores.
Me gustaría que las tres imágenes rotaran automáticamente.
davy.ai
Para solucionar el problema en el que la galería no muestra la siguiente imagen, es necesario ajustar el código CSS para la clase .Image. Específicamente, es necesario cambiar el valor de la propiedad -webkit-animation-direction de “alternate” a “normal”. Esto asegurará que la animación siempre se reproduzca en la misma dirección, permitiendo que la próxima imagen se muestre.
Para hacer que las tres imágenes roten automáticamente, se pueden ajustar los keyframes en la slide_animation para que ciclen a través de las tres imágenes. Esto se puede hacer cambiando el valor left de cada keyframe para que coincida con el ancho del contenedor (300px) multiplicado por el índice de la imagen que se desea mostrar. Por ejemplo, el keyframe para mostrar la segunda imagen tendría un valor left de 300px, y el keyframe para mostrar la tercera imagen tendría un valor left de 600px.
Aquí hay una versión actualizada del código CSS para la clase .Image con estos cambios:
Con estos cambios, la galería ahora debería mostrar las tres imágenes y rotar automáticamente a través de ellas.