He construido un carrusel simple que se desvanece dentro/fuera de varias imágenes. Los cambios visuales ocurren en CSS cuando JS cambia la clase.
Esto funcionó perfectamente con dos diapositivas. Ahora he introducido un tercero que no funciona y ahora puedo ver por qué funcionó con 2 y no funciona con 3 o más.
Esencialmente, lo que me gustaría lograr es esto:
Cada 7 segundos, el script elimina todas las instancias de slide--active y las agrega al siguiente elemento del ciclo.
Estoy usando Jquery en todo el sitio, por lo que tiene sentido utilizarlo. El CSS a continuación se puede ignorar, solo estoy interesado en el cambio de clase.
$('.slides').each(function(i, item) { setInterval( function() { $('.slide').toggleClass('slide--active'); }, 7000 + i) }); .slide { width: 4em; height: 4em; background: blue; } .slide--active { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="slides"> <li class="slide slide--active"></li> <li class="slide"></li> <li class="slide"></li> </ul>let currentIndex = 0; const slides = $('.slide'); const numberOfSlides = slides.length; setInterval(() => { // Find next item index currentIndex = ((currentIndex + 1) % numberOfSlides); // Remove class from all slides slides.removeClass('slide--active'); // Add class to a next item slides.eq(currentIndex).addClass('slide--active') }, 7000)O puede rastrear el índice anterior y simplemente eliminar la clase de la diapositiva anterior.
Puedes hacerlo así:
setInterval( function() { var item = $(".slide--active"); var next = item.next(".slide").length == 0 ? $('.slide').first() : item.next(".slide") item.removeClass("slide--active"); next.toggleClass('slide--active'); }, 2000)Esto eliminará la clase activa del elemento actual y establecerá la clase activa en el siguiente elemento (o el primer elemento si el elemento actual es el último)
Manifestación
setInterval( function() { var item = $(".slide--active"); var next = item.next(".slide").length == 0 ? $('.slide').first() : item.next(".slide") item.removeClass("slide--active"); next.toggleClass('slide--active'); }, 2000) .slide { width: 4em; height: 4em; background: blue; } .slide--active { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="slides"> <li class="slide slide--active"></li> <li class="slide"></li> <li class="slide"></li> </ul>Como expliqué en los comentarios, solo debe alternar la diapositiva actual y la siguiente. Finalmente, reinicie a la primera diapositiva cuando termine la última diapositiva.
// Get the number of slides let totalSlides = $('.slides .slide').length; setInterval(function(){ let current = false; $('.slide').each(function(i, item) { if(!current){ if(item.classList.contains('slide--active')){ if(i === totalSlides - 1) { $('.slide:first-child').addClass('slide--active'); } item.classList.toggle('slide--active'); current = true; } } else { item.classList.toggle('slide--active'); current = false; return false; } }); }, 7000); .slide { width: 4em; height: 4em; background: blue; } .slide--active { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="slides"> <li class="slide slide--active"></li> <li class="slide"></li> <li class="slide"></li> </ul>