Menu
Menu
<!DOCTYPE html>
<html>
<head>
<style>
@media (max-width: 768px) {
.slider, .slide, .slide img, video {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
}
.slider {
width: 100%;
height: 90vh;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 90vh;
position: absolute;
opacity: 0; /* Establece la opacidad inicial en 0 */
transition: opacity 2s ease-in-out !important; /* Agrega una transición para el efecto fade */
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
.navigation {
text-align: center;
position: absolute;
top: 45%;
transform: translateY(-45%);
width: 100%;
background-color: red;
}
.prev, .next {
background-color: transparent !important;
color: #fff;
padding: 20px;
border: none;
cursor: pointer;
font-size: 30px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
transition: background-color 5s ease !important;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.prev:hover, .next:hover, .prev:focus, .next:focus {
background-color: transparent;
text-decoration: none;
}
</style>
</head>
<body>
<div class=»slider»>
<div class=»slide»>
<img src=»https://mayotejada.com/lp/wp-content/uploads/2023/10/banner-1-1.jpg» alt=»Imagen 1″>
</div>
<div class=»slide»>
<video src=»https://mayotejada.com/lp/wp-content/uploads/2023/10/banner-video-lp.mp4″ autoplay loop muted playsinline></video>
</div>
<!– <div class=»slide»>
<img src=»https://mayotejada.com/lp/wp-content/uploads/2023/10/banner-3-1.jpg» alt=»Imagen 2″>
</div>–>
<div class=»slide»>
<img src=»https://lp.edu.pe/wp-content/uploads/2025/03/IMG_7090.jpg» alt=»Imagen 2″>
</div>
<div class=»slide»>
<img src=»https://mayotejada.com/lp/wp-content/uploads/2023/10/banner-5-1.jpg» alt=»Imagen 3″>
</div>
</div>
<div class=»navigation»>
<button class=»prev» onclick=»prevSlide()»><</button>
<button class=»next» onclick=»nextSlide()»>></button>
</div>
<script>
var currentSlide = 0;
var slides = document.querySelectorAll(‘.slide’);
var timer; // Variable para el temporizador
function showSlide(slideIndex) {
if (slideIndex >= slides.length) {
currentSlide = 0;
} else if (slideIndex < 0) {
currentSlide = slides.length – 1;
}
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0; // Establece la opacidad en 0 para todos los sliders
}
slides[currentSlide].style.opacity = 1; // Establece la opacidad en 1 para mostrar el slide actual
}
function prevSlide() {
clearTimeout(timer); // Detiene el temporizador al interactuar
currentSlide–;
if (currentSlide < 0) {
currentSlide = slides.length – 1;
}
showSlide(currentSlide);
}
function nextSlide() {
clearTimeout(timer); // Detiene el temporizador al interactuar
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide(currentSlide);
}
function autoSlide() {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide(currentSlide);
timer = setTimeout(autoSlide, 10000); // Cambia de diapositiva cada 10 segundos
}
showSlide(currentSlide);
autoSlide(); // Inicia el temporizador automáticamente
</script>
</body>
</html>
