Can setTimeout be used to create a repeating animation loop?

Question

Can setTimeout be used to create a repeating animation loop?

Currently, I am in the process of creating a slider from scratch. Although there are ready-made plugins available for this purpose, my goal is to understand the underlying logic by building it myself. So far, I have managed to piece together most of the components, except for the part where I want the slider to loop back to the beginning once it reaches the last slide.

If you'd like to take a look at my progress so far, here is a link to a CodePen: https://codepen.io/alexyap/pen/zwoRMy

$(document).ready(function(){

function slide() {
setTimeout(function(){
  $("#container").addClass("slide-left1")
}, 3000);

setTimeout(function(){
  $("#container").addClass("slide-left2")
}, 9000);

}

slide();

My objective now is to create a loop within my sliding mechanism. I am considering utilizing the setTimeout functions to achieve this, allowing each slide to pause briefly both after page load and on specific slides. This will give visitors ample time to read any content present on each slide. Any assistance or guidance on how to accomplish this would be greatly appreciated. Thank you in advance!

javascript jquery css css-transitions

Answer 1

Answer №1

Give this a try :

$(document).ready(function(){
  
  function slide() {
    setTimeout(function(){
      $("#container").removeClass("slide-left3");
      $("#container").addClass("slide-left1");
    }, 2000);

    setTimeout(function(){
      $("#container").removeClass("slide-left1");
      $("#container").addClass("slide-left2");
    }, 4000);
    
    setTimeout(function(){
     $("#container").removeClass("slide-left2");
     $("#container").addClass("slide-left3");
      slide();
   }, 6000);
  }
  
  slide();        
})

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  overflow-x: hidden;
}

#container {
  width: 300vw;
  background: #000;
  height: 100vh;
  position: relative;
  left: 0;
  transition: .9s ease;
}

#slide1 {
  background: red;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  position: absolute;
  transition: .9s ease;
}

#slide2 {
  background: yellow;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 100vw;
  top: 0;
  transition: .9s ease;
}

#slide3 {
  background: blue;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 200vw;
  top: 0;
  transition: .9s ease;
}

.slide-left1 {
  left: 0 !important;
}

.slide-left2 {
  left: -100% !important;
}

.slide-left3 {
  left: -200% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="slide1">
  </div>

  <div id="slide2">
  </div>

  <div id="slide3">
  </div>
</div>

Answer 2

Give this a try :

$(document).ready(function(){
  
  function slide() {
    setTimeout(function(){
      $("#container").removeClass("slide-left3");
      $("#container").addClass("slide-left1");
    }, 2000);

    setTimeout(function(){
      $("#container").removeClass("slide-left1");
      $("#container").addClass("slide-left2");
    }, 4000);
    
    setTimeout(function(){
     $("#container").removeClass("slide-left2");
     $("#container").addClass("slide-left3");
      slide();
   }, 6000);
  }
  
  slide();        
})

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  overflow-x: hidden;
}

#container {
  width: 300vw;
  background: #000;
  height: 100vh;
  position: relative;
  left: 0;
  transition: .9s ease;
}

#slide1 {
  background: red;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  position: absolute;
  transition: .9s ease;
}

#slide2 {
  background: yellow;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 100vw;
  top: 0;
  transition: .9s ease;
}

#slide3 {
  background: blue;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 200vw;
  top: 0;
  transition: .9s ease;
}

.slide-left1 {
  left: 0 !important;
}

.slide-left2 {
  left: -100% !important;
}

.slide-left3 {
  left: -200% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="slide1">
  </div>

  <div id="slide2">
  </div>

  <div id="slide3">
  </div>
</div>

Can setTimeout be used to create a repeating animation loop?

Answer №1

Similar questions

What is the best way to display information in a Handlebars template file?

Extract the label from Chip component within the onClick() event in material-ui

Steps to include a title next to a progress bar:

ReactJS: Error message indicating that the update depth limit has been exceeded

What is the best way to create a compound query in Firebase?

Customize MUI 5 input label background color for your own component

Executing NodeJS commands and Linux commands via Crontab scheduling

a guide to incorporating Google Maps into your website using latitude and longitude coordinates

Is there a way to align an image alongside text in CSS with Bootstrap 4?

Verify if there is a cookie available; then execute the load() function. If the cookie matches, it is necessary to

What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

Directing users to varying pages based on a particular criteria

A guide to merging two JSON objects into a single array

Issue with horizontal scrolling functionality in DataTables

Run your node.js project on the internet

Testing if the App properly renders results in an error message: "No element found with the text: Profil"

Trigger an Ajax request upon user confirmation, which will only be prompted based on the result of a previous Ajax call

The headless mode of Google Chrome is displaying HTML content in a mobile-friendly format

Troubleshooting the real-time replacement of LESS.CSS and CSS files using JavaScript

Combining plugin setups and functionalities into a unified script