Resolved: Loop through items and after set interval remove class from all whilst adding class to next item

Question:

I have built a simple carousel which fades in/out of various images. The visual changes happen in CSS when JS changes the class.
This worked perfectly with two slides. Now I’ve introduced a third it does not and I can now see why it worked with 2 and doesn’t with 3 or more.
Essentially what I’d like to achieve is this:
Every 7 seconds the script removes all instances of slide--active and adds it to the next item in the loop.
I’m using Jquery throughout the site, so it makes sense to utilise it. The CSS below can be ignored, I’m only interested in the class change.

$('.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>

Answer:

You can do it like this:

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)

This will remove the active class from the current element, and set the active class on the next element (or first element if current element is last)
Demo

If you have better answer, please add a comment about this, thank you!

Resolved: Loop through items and after set interval remove class from all whilst adding class to next item

Resolved: How can I copy files using the ansible.builtin.copy module and avoid conflicting file names?

Resolved: Reshape tensors of unknown shape with tf.function

Resolved: Use Svelte Component as Slot

Leave A Reply