CARRUSEL CON DOM
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Carrusel Natural</title>
<style>
body {
text-align: center;
font-family: 'Segoe UI', sans-serif;
background-color: #eef2f3;
}
#carrusel {
margin: 40px auto;
width: 320px;
height: auto;
padding: 10px;
background-color: #fff;
border: 3px solid #2b6777;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}
#carrusel img {
width: 300px;
height: 200px;
display: none;
object-fit: cover;
border-radius: 6px;
}
#descripcion {
margin-top: 10px;
font-style: italic;
color: #444;
}
.flechas {
margin-top: 20px;
}
.flecha {
font-size: 30px;
padding: 10px 20px;
margin: 0 15px;
background-color: #2b6777;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}
.flecha:hover {
background-color: #1c4c5b;
}
</style>
</head>
<body>
<!-- Contenedor del carrusel -->
<div id="carrusel">
<img id="img0" src="https://media.istockphoto.com/id/1431937267/photo/beautiful-sunrise-sun-rays-enlighten-the-meadow-with-trees-spring-morning-landscape-with-high.jpg?s=1024x1024&w=is&k=20&c=-0RKA-A8dcLhPFU8FFkPaJ7UNr_mGbAPIKG4M87Px88=" />
<img id="img1" src="https://cdn.pixabay.com/photo/2015/10/05/15/29/river-972786_1280.jpg" />
<img id="img2" src="https://media.istockphoto.com/id/482428650/photo/view-of-the-lake.jpg?s=1024x1024&w=is&k=20&c=_zmM6O1KtmZswB4mMkynoqyAeIkawg8On4xhREiMtPw=" />
<img id="img3" src="https://media.istockphoto.com/id/1496320869/photo/sendero-dentro-del-bosque.jpg?s=1024x1024&w=is&k=20&c=uSuqnH3AMCZZU6GPrXTjjckBFI6kLM237kGsyVPXt7U=" />
<!-- Descripción de la imagen -->
<div id="descripcion">Montañas al amanecer</div>
</div>
<!-- Botones de navegación -->
<div class="flechas">
<button class="flecha" onclick="anterior()">←</button>
<button class="flecha" onclick="siguiente()">→</button>
</div>
<!-- Script de funcionalidad -->
<script>
// Índice actual de la imagen
var actual = 0;
// Arreglo con las descripciones de cada imagen
var descripciones = [
"Montañas al amanecer",
"Río en calma entre árboles",
"Lago reflejando el cielo",
"Sendero dentro del bosque"
];
// Mostrar la primera imagen al cargar la página
document.getElementById("img0").style.display = "block";
// Función para mostrar una imagen y su descripción
function mostrarImagen(index) {
// Ocultar todas las imágenes
for (var i = 0; i < 4; i++) {
document.getElementById("img" + i).style.display = "none";
}
// Mostrar la imagen actual
document.getElementById("img" + index).style.display = "block";
// Mostrar la descripción correspondiente
document.getElementById("descripcion").textContent = descripciones[index];
}
// Función para ir a la imagen siguiente
function siguiente() {
actual++;
if (actual > 3) actual = 0;
mostrarImagen(actual);
}
// Función para ir a la imagen anterior
function anterior() {
actual--;
if (actual < 0) actual = 3;
mostrarImagen(actual);
}
</script>
</body>
</html>
Comentarios
Publicar un comentario