Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

Question

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

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'm attempting to replicate a website and one of the tasks is the following. I have several divs (boxes) positioned horizontally that can be scrolled. I want them to automatically scroll from one div to the next, and then repeat the process at the end. So it should be something like div1 pause.. div2 pause.. etc.

Any suggestions on how to achieve this?

javascript html jquery css

Answer 1

Answer №1

Here's a detailed example with comments explaining each step. I have added numbers to the div for clarity. You can also find a helpful solution on Stack Overflow, which I modified using the setInterval() method to iterate through elements (Source).

The code is well-commented for easy understanding.

// Start index
let auto_index = 0;

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

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

  // Increment index
  auto_index += 1; 
  
  // Reset if index exceeds total 
  if (auto_index > total - 1 ) {
    auto_index = 0;
  }
  
  scrollTo(auto_index);
  
}, 2000); // 2000 milliseconds


// Adapted from:
// https://stackoverflow.com/a/45388452/5604852
// Using .scrollIntoView with smooth and center options
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>

Answer 2

Here's a detailed example with comments explaining each step. I have added numbers to the div for clarity. You can also find a helpful solution on Stack Overflow, which I modified using the setInterval() method to iterate through elements (Source).

The code is well-commented for easy understanding.

// Start index
let auto_index = 0;

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

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

  // Increment index
  auto_index += 1; 
  
  // Reset if index exceeds total 
  if (auto_index > total - 1 ) {
    auto_index = 0;
  }
  
  scrollTo(auto_index);
  
}, 2000); // 2000 milliseconds


// Adapted from:
// https://stackoverflow.com/a/45388452/5604852
// Using .scrollIntoView with smooth and center options
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>

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

Answer №1

Similar questions

Using the Chrome WebDriver for Selenium to interact with a text input element with dynamically changing IDs

Creating phony passwords effortlessly in JavaScript utilizing the informal library

Error encountered when attempting to send a jQuery Post to API due to Access-Control-Allow-Origin issue

What is the best way to execute 2 statements concurrently in Angular 7?

The second scenario is triggered once the conditions are satisfied using a JavaScript switch case

File reading and processing must be completed before attempting to write to a new file. This is a promise-related stipulation

Having trouble hiding the message "Not found" with ng-hide and filters in AngularJS

Merge JavaScript files from various folders using grunt's configuration settings

Hiding javascript code within comment tags ""

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Is there a way to eliminate the # sign from hash data using jQuery?

What is the best way to store checkbox statuses in local storage and display them again in a JavaScript to-do list?

What is the best way to perfectly center my CSS menu in a fluid style layout?

Including a drop-down arrow or triangle next to the initial button

In AngularJS, when a user clicks on a specific element, the program should fetch the corresponding value from a separate dataset and display it

Utilize HTML to resize image to fit within container

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

What exactly is the significance of the </< in THREE.Camera.prototype.lookAt</<()?

<div.content> </div.content> - Structure

Experiencing a snag with implementing Firebase version 9 FCM in Next.js 12