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>