Set Length of Time for Slides to Move

Question

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!

You might be getting downvoted because you haven't included a [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Zach Jensz, May 01 '22 at 03:11

score 0 · Answer 1 · answered Apr 30 '22 at 09:21

0

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...)

answered Apr 30 '22 at 09:21

Yarin_007

1,449
1
10
17

Thank you! I found a bunch of list type codes on codepen that work nicely to put in a slow transition, but because they are lists, I cannot make the images inside of them stretchable. I tried many times to put in width = 100% at the ul level, at the li level, and even for img's in that list of in the bigger container div. – IOio May 02 '22 at 19:40
stretchable? what do you mean? [object-fit?](https://www.w3schools.com/css/css3_object-fit.asp) [background-size?](https://www.w3schools.com/cssref/css3_pr_background-size.asp) – Yarin_007 May 02 '22 at 20:56
Like the one I show above (I edited it to show an example). So it fits the container size 100%, and if that container changes size/the website width changes, then it will also change in size. – IOio May 03 '22 at 01:08
I tried putting in the transition in css on the container and the slides themselves, and it has no effect. Probably because it is JS that controls it. .slides-container, .hp-slides { -webkit-transition: all 5s cubic-bezier(1,.01,.32,1); -moz-transition: all 5s cubic-bezier(1,.01,.32,1); -o-transition: all 5s cubic-bezier(1,.01,.32,1); -ms-transition: all 5s cubic-bezier(1,.01,.32,1); transition: all 5s cubic-bezier(1,.01,.32,1); } – IOio May 03 '22 at 03:05
maybe [this](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container?rq=1) could help? – Yarin_007 May 04 '22 at 17:26
No, because it's a list, not a div. I know images in div's can be made fit 100% width, but not in a list/as a list item. The example you senT on codepen and others I found for slideshows all used lists, instead of divs. The example I show above is with divs. I just need to change the time setting in that one in JS if anyone knows how. Thank you! – IOio May 05 '22 at 04:17
I mean, just [change it to divs](https://codepen.io/jsmith102/pen/WNMvqgP) – Yarin_007 May 05 '22 at 10:15
Also, did you read the code you want to modify? it isn't "possible" to make it *move elegantly*. it literally makes all photos disappear and then picks one to make visible. you could maybe fade it in or out slowly, but without changing the code completely you can't make it move the way you want. – Yarin_007 May 05 '22 at 10:19
Well, I want to have it move elegantly. That's the whole reason for my post. And I think it would be easier to change the JS in the code I posted rather than start with a totally different code that doesn't seem to work anyway... – IOio May 08 '22 at 20:13
what do you mean 'doesn't work'? [here it is with image tags and object-fit](https://codepen.io/jsmith102/pen/LYQNjvz). Be sure to [load](https://www.w3schools.com/jquery/jquery_get_started.asp) the jquery library beforehand, as the slider depends on it. – Yarin_007 May 09 '22 at 19:22
It's not what I'm looking for. I don't want to load jquery just for this. And the slides aren't in a loop. The JS one above works really well, just needs a timer. – IOio Jun 01 '22 at 19:04

Set Length of Time for Slides to Move

1 Answers1