Este es un indicador de código personalizado. Cambie a Vista Previa o publique la página para ver cómo funciona su código.
Doble clic para editar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.carousel-container {
position: relative;
max-width: 100%;
overflow: hidden;
margin: auto;
}
.carousel-slide {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-slide img {
min-width: 100%;
max-height: 500px;
object-fit: cover;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
padding: 16px;
margin-top: -22px;
color: #ffffff;
font-weight: bold;
font-size: 36px;
transition: 0.6s ease;
user-select: none;
z-index: 1;
}
.next {
right: 0;
}
.prev {
left: 0;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-slide">
<img src="https://us-ms.gr-cdn.com/getresponse-t8iwN/photos/499daa27-15f2-47ca-a69f-e55cf52c96a8.jpg" alt="Imagen 1">
<img src="https://us-ms.gr-cdn.com/getresponse-t8iwN/photos/b126806c-13d7-48b8-be67-e1967086b1e4.jpg" alt="Imagen 2">
<img src="https://us-ms.gr-cdn.com/getresponse-t8iwN/photos/4b270af3-70b2-4254-9768-7bcbb540094c.jpg" alt="Imagen 3">
</div>
<a class="prev" onclick="moveSlide(-1)">❮</a>
<a class="next" onclick="moveSlide(1)">❯</a>
</div>
<script>
let slideIndex = 0;
const slides = document.querySelector('.carousel-slide');
const totalSlides = slides.children.length;
function moveSlide(direction) {
slideIndex += direction;
if (slideIndex >= totalSlides) {
slideIndex = 0; // Ir a la primera imagen
} else if (slideIndex < 0) {
slideIndex = totalSlides - 1; // Ir a la última imagen
}
const offset = -slideIndex * 100;
slides.style.transform = 'translateX(' + offset + '%)';
}
function autoSlide() {
moveSlide(1);
}
setInterval(autoSlide, 3000); // Cambia cada 3 segundos
</script>
</body>
</html>
