How to make this multi-slide panel loop indefinitely

Question

I have three panels that have just text or text and images that I want to loop indefinitely, and be scalable from 1-1000 slides.

I have the following markup:

<div class="mb-panel-container cf">

    <div class="mb-panel-section mb-slider">

        <div class="mb-panel active">
            <h1>1.1</h1>
            <p>slide 1.1</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>1.2</h1>
            <p>slide 1.2</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>1.3</h1>
            <p>slide 1.3</p>
            <p class="datetime"></p>
        </div>

    </div>



    <div class="mb-panel-section mb-slider">

        <div class="mb-panel active">
            <h1>2.1</h1>
            <p>slide 2.1</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>2.2</h1>
            <p>slide 2.2</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>2.3</h1>
            <p>slide 2.3</p>
            <p class="datetime"></p>
        </div>

    </div>



    <div class="mb-panel-section mb-slider">

        <div class="mb-panel active">
            <h1>3.1</h1>
            <p>slide 3.1</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>3.2</h1>
            <p>slide 3.2</p>
            <p class="datetime"></p>
        </div>

        <div class="mb-panel">
            <h1>3.3</h1>
            <p>slide 3.3</p>
            <p class="datetime"></p>
        </div>

    </div>

</div>

And the following script:

<script>
    $(document).ready(function() {
        var items       = $(".mb-panel"),
            currentItem = items.filter(".active");

        window.setInterval( function() {
            var nextItem = currentItem.next();
            currentItem.removeClass("active");

            if( nextItem.length ) {
                currentItem = nextItem.addClass("active");
            } else {
                currentItem = items.first().addClass("active");
            }
        }, 5000);
    });
</script>

Unfortunately I am ending up with something like this:

Essentially, the first run of the panels work, but when it gets to the loops it stops for the other panels apart from column 1. I will be opening this up to allow the users to add as many notices per panel as they need, but require it to loop back to the beginning for each column once it reaches the last slide.

Answer 1

You have to pick the exact element with .eq(index) and change the index, depending - if it reached the max allowed length.

$('.mb-slider').each(function(){ // looping for each slider block
  let panels = $(this).find('.mb-panel'); // collecting current slides
  let len = panels.length;
  let index = 0;
  
  setTimeout(function loop(){
    panels.eq(index).removeClass('active');
    index = (index == len - 1) ? 0 : index + 1; // Google → Ternary operator  
    panels.eq(index).addClass('active');
    
    setTimeout(loop, 1000);
  }, 1000);
});

.mb-panel {
  display: none;
  border: 2px solid orange;
  margin: 5px;
  padding: 5px;
}

.mb-panel.active { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mb-panel-container cf">
  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">1-1</div>
    <div class="mb-panel">1-2</div>
    <div class="mb-panel">1-3</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">2-1</div>
    <div class="mb-panel">2-2</div>
    <div class="mb-panel">2-3</div>
    <div class="mb-panel">2-4</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">3-1</div>
    <div class="mb-panel">3-2</div>
    <div class="mb-panel">3-3</div>
    <div class="mb-panel">3-4</div>
    <div class="mb-panel">3-5</div>
  </div>
</div>

I've used self-calling setTimeout chain just because like that trick. Here you can use setInterval as well. But in some cases, it make sense - not to call function repetitively, while the previous step haven't completed yet.

Translated into native JS ( find 10 differences :D ):

let slider = document.querySelectorAll('.mb-slider');

for( let i = 0; i < slider.length; i++ ){  
  let panels = slider[i].querySelectorAll('.mb-panel');  
  let len = panels.length;
  let index = 0;
  
  setTimeout(function loop(){
    panels[index].classList.remove('active');
    index = (index == len - 1) ? 0 : index + 1;
    panels[index].classList.add('active');
    
    setTimeout(loop, 1000);
  }, 1000);
}

.mb-panel {
  display: none;
  border: 2px solid orange;
  margin: 5px;
  padding: 5px;
}

.mb-panel.active { display: block; }

<div class="mb-panel-container cf">
  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">1-1</div>
    <div class="mb-panel">1-2</div>
    <div class="mb-panel">1-3</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">2-1</div>
    <div class="mb-panel">2-2</div>
    <div class="mb-panel">2-3</div>
    <div class="mb-panel">2-4</div>
  </div>

  <div class="mb-panel-section mb-slider">
    <div class="mb-panel active">3-1</div>
    <div class="mb-panel">3-2</div>
    <div class="mb-panel">3-3</div>
    <div class="mb-panel">3-4</div>
    <div class="mb-panel">3-5</div>
  </div>
</div>