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-CYK4n/photos/91e879df-1318-4b9a-b833-9c816ae929bb.jpg" alt="Imagen 1">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/4acc7e04-a315-48e4-89ae-3e7ff7c3e69a.jpg" alt="Imagen 2">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/b0f09ec7-74db-4595-a681-6238eb33e36a.jpg" alt="Imagen 3">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/499bcd4d-73c0-4cc6-9474-889b481e843c.jpg" alt="Imagen 4">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/18076762-1c25-4b42-a875-80984219f34a.jpg" alt="Imagen 5">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/f59d46dd-832b-4426-957a-1c655c3425fa.jpg" alt="Imagen 6">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/930566e0-b8cc-474a-98ac-d6298f21fed5.jpg" alt="Imagen 7">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/e54ec364-0dd9-4669-b337-f134c15e3bfd.jpg" alt="Imagen 8">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/67ceca0e-ec9a-4b42-80d0-4e9d8851f233.jpg" alt="Imagen 9">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/33eafd85-74dc-486a-b98a-f461fe520690.jpg" alt="Imagen 10">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/3e960e63-7197-4eb3-a466-640b9bfe7141.jpg" alt="Imagen 11">
<img src="https://us-ms.gr-cdn.com/getresponse-CYK4n/photos/6c55fe93-020a-42e8-bc17-761459e9e8e7.jpg" alt="Imagen 12">
</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>
