'Set Length of Time for Slides to Move

I am using this JS code I found to make a slideshow work:

var slideIndex = 1;
        showDivs(slideIndex);
        
        function plusDivs(n) {
          showDivs(slideIndex += n);
        }
    
        function showDivs(n) {
          var i;
          var x = document.getElementsByClassName("hp-slides");
          if (n > x.length) {slideIndex = 1}
          if (n < 1) {slideIndex = x.length}
          for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";  
          }
          x[slideIndex-1].style.display = "block";  
        }

.slides-container {
        display: block;
        position: relative;
        width: 100%;
        }
        .slides-container img {
            width: 100%;
            height: auto;
            display: block;
            }
            
            
    .button {
        position: absolute;
        top: 50%;
        transform: translate(0%,-50%);
        user-select: none; 
        border: none;
        background-color: rgb(0,0,0,0);
        cursor: pointer;
        border: none;
        }

        .buttonL {
            left: 0;
            height: 100%;
            padding: 0 10% 10px 2.8%;
            }
        .buttonR {
            right: 0;
            height: 100%;
            padding: 0 2.8% 10px 10%;
            }

        .arrowL,
        .arrowR {
            width: 25px;
            height: 25px;
            color: #fff;
            border-bottom: 6px solid;
            border-left: 6px solid;
            margin-bottom: 20px;
            }

            .arrowL {transform: rotate(45deg);margin-left: 5px;}
            .arrowR {transform: rotate(-135deg); margin-right: 5px;}

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<body>
    
<div class="slides-container">
        <img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg/1200px-ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg" alt="">
        <img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Akita_Inu_dog.jpg/1200px-Akita_Inu_dog.jpg" alt="">
        <img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg" alt="">
        
        <button class="button buttonL" onclick="plusDivs(-1)"><div class="arrowL"></div></button>
        <button class="button buttonR" onclick="plusDivs(1)"><div class="arrowR"></div></button>
</div>

</body>

But the images move right as I click = too fast/ not elegant.

I saw this other code in other JS slider examples, which made the slides move slower (Those other codes didn't work for me for other reasons (couldn't be resized, needed complicated/hidden jQuery, etc.))

setInterval(function() {
    showDivs()
    }, 5000);

But I don't know where to place it. I changed the name to be one of the function names (showDivs) and tried sticking it in between functions, but it didn't work.

I'm already on 3-4 days looking for a simple slider with arrows that will scale with the page and losing my mind. Thank you!

javascript slider

Solution 1:^[1]

Check out this codepen

in js:

// automatic slider
var autoSlider = setInterval(slideRight, 3000);
// change that line (34) to control the time each slide is shown.

in css:

transition: all 3s cubic-bezier(1,.01,.32,1);   
/* change that line (162) to control the transition length. */

in html:

replace the divs inside the li elements with your img tags. (lines 14->17, 22->25, etc...)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Yarin_007

'Set Length of Time for Slides to Move

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]