Can anyone provide instructions on incorporating a timer into carousel sliders using JavaScript?

Question

Can anyone provide instructions on incorporating a timer into carousel sliders using JavaScript?

I have a carousel sliders with text that I've customized using my own JavaScript. The carousel arrows work properly, but I want the sliders to automatically move after a set interval.

Here's the HTML

<div class="col-6 col-xs-12  " style="text-align:-webkit-center;">  

 <div class="slideshow-container">

<div class="mySlides w3-container w3-center w3-animate-right">
 <h2 class="font-size" id="f37" data-animation="fadeInUp" data-delay="200ms">1</h2>

</div>

<div class="mySlides w3-container w3-center w3-animate-right">
 <h2 class="font-size" id="f37" data-animation="fadeInUp" data-delay="200ms">2</h2>

</div>

<div class="mySlides w3-container w3-center w3-animate-right">
 <h2 class="font-size" id="f37" data-animation="fadeInUp" data-delay="200ms">3</h2>

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides(1)">&#10095;</a>

   </div>
</div>

Here's the JS

<script>
  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
  showSlides(slideIndex += n);
            }

  function currentSlide(n) {
  showSlides(slideIndex = n);
            }

  function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
              }
  for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace(" active", "");
              }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
            }
</script>

I hope my question is clear. Any help would be greatly appreciated. I've added the code to codepen so you can see the strange behavior it exhibits when the arrows are clicked, despite the auto-slides working correctly when idle. https://codepen.io/mahirq8/pen/JjjJzbe

Thank you

javascript html css bootstrap-4

Answer 1

Answer №1

To achieve that functionality, you can utilize the setTimeout method.

Start by declaring a variable named timer at the beginning of your script:

var timer;

Within your showSlides function, insert the following two lines (you can place them anywhere, even at the end):

clearTimeout(timer);
timer = setTimeout(() => plusSlides(1), 2000);

By implementing this approach, if you continue to use the arrow-buttons, the timer will reset and resume sliding the slides after a 2-second interval from your last involvement.

You may preview the functionality here:

(previews of JavaScript and CSS code)

Answer 2

To achieve that functionality, you can utilize the setTimeout method.

Start by declaring a variable named timer at the beginning of your script:

var timer;

Within your showSlides function, insert the following two lines (you can place them anywhere, even at the end):

clearTimeout(timer);
timer = setTimeout(() => plusSlides(1), 2000);

By implementing this approach, if you continue to use the arrow-buttons, the timer will reset and resume sliding the slides after a 2-second interval from your last involvement.

You may preview the functionality here:

(previews of JavaScript and CSS code)

Answer 3

Answer №2

Insert the following code inside the <script> tag.

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Transition to next image every 2 seconds
}

The crucial line missing is the last one: setTimeout(showSlides, 2000);

If you want to view the code directly, click on this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

Answer 4

Insert the following code inside the <script> tag.

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Transition to next image every 2 seconds
}

The crucial line missing is the last one: setTimeout(showSlides, 2000);

If you want to view the code directly, click on this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

Can anyone provide instructions on incorporating a timer into carousel sliders using JavaScript?

Answer №1

Answer №2

Similar questions

The 'OR' statement in jQuery (||) is not functioning correctly within an if condition

What are the implications of using a non-200 status code in my controllers to intentionally trigger an ajax error?

Problem with stacking order in Internet Explorer 7

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

Incorporating a dropdown change event in HTML

Is there a way to programmatically access the title of a TitledPane in JavaFX without using CSS?

The process of retrieving child data from a JSON object

How can I assign a default value to an angular 2+ dropdown menu? [I have not found a solution in previous inquiries]

Can REST calls be initiated when the CSP is unable to be modified from the default-src: 'none'?

Fill a small number of records

Achieving victory through res.send

Limiting the input in a text box to only allow whole numbers and no decimal values

Is there really a need to go through the hassle of creating a pure javascript/jquery widget when I can simply load it into an

Tips for utilizing the window object in Angular 7

Tips for restricting the options available in a select dropdown menu

Challenge with timing in slideUp and slideDown animations (jQuery)

Text gradually appearing using a text button

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Linking information within a three-dimensional mesh structure in the context of a city created through procedural generation

Update array of hotel room reservations using Mongoose