CODEWITHSUNDEEP
javascripthtmlcss
Priest
Priest

Reputation: 11

Controlling slideshow speed with a slider

I want to create an automatic slideshow that I place inside of a canvas, and that I can control the speed of the slideshow with a slider. Before I even think about the canvas, I want to focus on the slider.

How can I make my slider work with my slideshow, so that I can control the speed, between 1 second and 5 second delay?

This is my code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {
        font-family: Verdana, sans-serif;
}
.mySlides {
        display: none;
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

</style>
</head>
<body>


<div class="slideshow-container">

<div class="mySlides fade">
  <img src="1.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="2.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="3.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="4.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="5.png" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="6.png" style="width:100%">
</div>
</div>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<div style="text-align:right">  
    <input id="speed" name="speed" type="range" min="1" max="5" value="3">
    <p style="color: black">Value: <span id="speedValue"></span></p>        
        <script>
            var slider = document.getElementById("speed");
            var output = document.getElementById("speedValue");
            output.innerHTML = slider.value;// Display the default slider value
            // Update the current slider value (each time you drag the slider handle)
            slider.oninput = function() {
            output.innerHTML = this.value;
            }
        </script>
</div>

<script>
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); 
}
</script>

</body>
</html>

Upvotes: 1

Views: 1125

Answers (1)

NBlaine
NBlaine

Reputation: 493

You are close to this already, you just need to make the setTimeout in your showSlides() func to be based off of the value from your slider.

Here is how I did it in your JSFiddle:

SpeedMod Variable

var speedMod = 3

Create a new global var, I called mine speedMod but you can name it anything. I also defaulted the value to 3 because that is what your slider default was, but you can change this as well.

slider.oninput = function()

Now we want to add the code to modify our global var when the slider changes. In your slider.oninput = function() add the following line speedMod = this.value;. Your whole function will look like this:

slider.oninput = function() {
            output.innerHTML = this.value;
            speedMod = this.value;
}

showSlides function

Last piece is to make our timeout based off of our speedMod value. This can be accomplished by replacing:

setTimeout(showSlides, 2000);

with

setTimeout(showSlides, speedMod*1000);

Remember to include the *1000 because setTimeout() works in ms, not full seconds.

Let me know if you need any more help.

Full JSFiddle with changes

Upvotes: 1

Related Questions