How to automatically scroll(horizontally) with pause on each div?

Question

setInterval(function scroll() {
  $(".box_auto").each(function(i, e) {
    $("html, body").animate({
      scrollTop: $(e).offset().top
    }, 500).delay(500);
  });
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 5000);
  }, 4000);
  return scroll;
}(), 9000);

.auto_scroll_top {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  margin-top: 1.2rem;
}

.auto_scroll_top .box_auto {
  display: inline-block;
  min-width: 400px;
  height: 200px;
  background-color: orange;
  border-radius: 10px;
  margin: 0 5px;
}

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

I am trying to make a website clone and one of the things I have to do is the following. I have many divs(boxes) in a horizontal position which you can scroll.I want it to scroll automatically on each div(to jump from one div to the next, and at the end to repeat itself) So it should be something like div1 pause.. div2 pause.. etc.

Any ideas how to do it?

Answer 1

Here's an example which is fully commented. I added some numbers to your div so you can see whats going on. I found a nice answer here https://stackoverflow.com/a/45388452/5604852 which I then adapted using setInterval() to work through the collection (https://javascript.info/settimeout-setinterval#setinterval).

The code is fully commented so should be explanatory.

---

// Starting index
let auto_index = 0;

// Total number of divs
let total = document.getElementsByClassName('box_auto').length;

// Set interval
let timerId = setInterval( function() {

  // Increase index
  auto_index = auto_index + 1 
  
  // Check if index is above total 
  if (auto_index > total - 1 ) {
  
    // Reset if it is
    auto_index = 0;
    
  }
  
  scrollTo(auto_index);
  
}, 2000); // 2000 = 2 seconds


// Adapted from this answer:
// https://stackoverflow.com/a/45388452/5604852
// Using .scrollIntoView
// Adding smooth and center for design reasons
function scrollTo(item) {
    document.getElementsByClassName('box_auto')[item].scrollIntoView({ behavior: 'smooth', block: 'center' });    
};

.auto_scroll_top{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap; 
    margin-top: 1.2rem;
}
.box_auto{
    display:inline-block;
    min-width:300px;
    height:200px;
    background-color: orange;
    border-radius: 10px;
    margin:0 5px;
}

.box_auto {
font-size: 150px;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
  <div class="box_auto">1</div>
  <div class="box_auto">2</div>
  <div class="box_auto">3</div>
  <div class="box_auto">4</div>
</div>