Mi función de JavaScript está leyendo las 6 imágenes en total y no 3 en el móvil y 3 en el escritorio. Mis clases de CSS hidden-mobile hidden-desktop funcionan perfectamente y ocultan las imágenes haciendo que el carrusel se desplace por las 6, mostrando tres y otras tres en blanco. Estoy muy confundido.
El HTML:
<div class="parent hidden-mobile"> <div class="mySlides fade image2"> <img src="img/homebanner1.png" style="width:100%"> </div> <div class="mySlides fade image2"> <img src="img/homebanner2.png" style="width:100%"> </div> <div class="mySlides fade image2"> <img src="img/homebanner3.png" style="width:100%"> </div> </div> <div class="parent hidden-desktop"> <div class="mySlides fade image2"> <img src="img/homebannermobile1.png" style="width:100%"> </div> <div class="mySlides fade image2"> <img src="img/homebannermobile2.png" style="width:100%"> </div> <div class="mySlides fade image2"> <img src="img/homebannermobile3.png" style="width:100%"> </div> </div>JavaScript:
var slideIndex = 0; showSlides(); function showSlides() { var i; var 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, 10000); // Change image every 10 seconds }Puede agregar una consulta de medios a su css que ocultará tres en un tamaño de pantalla determinado:
@media only screen and (max-width: 640px) { .parent hidden-desktop{ display: none; } } @media only screen and (min-width: 640px) { .parent hidden-mobile{ display: none; } }Pero deberá agregar la clase padre oculto móvil como lo hizo para el escritorio con "padre oculto-escritorio".