tengo un control deslizante de javascript en mi sitio web html, el código es el siguiente:
let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].style.display = "block"; setTimeout(showSlides, 2000); } <div class="col-lg-6 col-md-10 slideshow-container"> <div class="mySlides fades"> <div class="numbertext">1 / 2</div> <img src="fb1.jpg" alt="Image"> </div> <div class="mySlides fades"> <div class="numbertext">2 / 2</div> <img src="fb2.jpg"> </div> </div>esto funciona bien, ahora he agregado otro control deslizante en la misma página:
<div class="col-lg-6 col-md-10 slideshow-container"> <div class="mySlides fades"> <div class="numbertext">1 / 2</div> <img src="auto1.jpg" alt="Image"> </div> <div class="mySlides fades"> <div class="numbertext">2 / 2</div> <img src="auto2.jpg"> </div> </div>ahora el problema es su tipo de colisión, creo que porque ambos tienen el mismo código javascript, tanto la diapositiva está calculando el total de imágenes en ambas diapositivas como las imágenes en blanco están entrando en ambas, ¿alguien puede decirme cómo solucionar esto? Gracias de antemano.
Primero: llama a la función showSlides() con un parámetro ( slideIndex ) que no es necesario, porque la función usa la var declarada global.
Recomiendo agregar o eliminar una clase (por ejemplo .active ) en lugar de diseñar con js. La ventaja es que puede obtener el índice en la función a través de esa clase en lugar de usar la var global para eso:
const active_slide = document.querySelector('.active'); let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1; Con eso en uso, puede recorrer los slideshow-container sin tener problemas con el índice de slideIndex .
Ejemplo de trabajo:
(Eliminé las funciones plusSlides() y currentSlide() , porque no se usan en ese ejemplo y al menos plusSlides() necesita otra funcionalidad que showSlides() )
showSlides(); function showSlides() { const containers = document.querySelectorAll('.slideshow-container'); for (let i = 0; i < containers.length; i++) { const slides = containers[i].getElementsByClassName("mySlides"); const active_slide = containers[i].querySelector('.active'); let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1; active_slide.classList.remove('active'); slideIndex++; if (slideIndex > slides.length) { slideIndex = 1 } slides[slideIndex - 1].classList.add('active'); } setTimeout(showSlides, 2000); } .mySlides { display: none; } .mySlides.active { display: block; } <div class="col-lg-6 col-md-10 slideshow-container"> <div class="mySlides fades active"> <div class="numbertext">1 / 2</div> <img src="fb1.jpg" alt="Image 1"> </div> <div class="mySlides fades"> <div class="numbertext">2 / 2</div> <img src="fb2.jpg" alt="Image 2"> </div> </div> <div class="col-lg-6 col-md-10 slideshow-container"> <div class="mySlides fades"> <div class="numbertext">1 / 2</div> <img src="auto1.jpg" alt="Image 3"> </div> <div class="mySlides fades active"> <div class="numbertext">2 / 2</div> <img src="auto2.jpg" alt="Image 4"> </div> </div>