Carousel javascript

Question

How can I make the 2nd image(the bottom) stay in place till the 1st image(the active) completely finish transition in place? and then start the loop again without reordering the array? I don't know if this is completely wrong or if I'm missing something, I've been trying for a while! please explain your comment/answer, thanks for helping.

 var slideIndex = 0; carousel(); function carousel() { var i; var slideShowSlide = document.querySelector('.slideshow__slide'); var slideBgFigure = Array.from(slideShowSlide.children); var slideWidth = slideBgFigure[0].getBoundingClientRect().width; for (i = 0; i < slideBgFigure.length; i++) { slideBgFigure[i].style.transform = "translateX(-" + slideWidth + "px)"; } slideIndex++; if (slideIndex > slideBgFigure.length) { slideIndex = 1; } slideBgFigure[slideIndex - 1].style.transform = "translateX(0px)"; setTimeout(carousel, 3000); };

 .slideshow__slide { overflow: hidden; height: 359px; position: relative; } .slide__bg { position: absolute; width: 100%; margin: 0; color: #fff; background: #333; overflow-x: hidden; -webkit-box-shadow: inset 0 0 0 1px #f0f0f0; box-shadow: inset 0 0 0 1px #f0f0f0; transition: all 1.5s ease; } .slide__bg img { display: block; }

 <section class="slideshow__slide slide"> <figure class="slide__bg current"> <img src="https://via.placeholder.com/620x200/070" /> </figure> <figure class="slide__bg"> <img src="https://via.placeholder.com/620x200/700" /> </figure> <figure class="slide__bg"> <img src="https://via.placeholder.com/620x200/007" /> </figure> </section>

Answer 1

I don't know why this question got 2 downvotes? Maybe it wasted people's time? It wasted my whole morning too, damn...

Here might be what the OP wants to get. I used CSS animation to control animation instead of javascript, setInterval instead of setTimeout. I use javascript to control which slide whose the class current . But it turned out the most tricky time-consuming part of me is not animation, but z-index . I got a typo and it messed up too. Holy damn, took a lot of time to do this looks easy problem.

---

Edit: The simpler code, use CSS transition instead of animation, the javascript code just permutate the classes.

 var slideShowSlide = document.querySelector('.slideshow__slide'); var slideBgFigure = Array.from(slideShowSlide.children); function permutateClassname(array) { var tmp = array[0].className; for (let i = 0; i < array.length - 1; i++) { array[i].className = array[i + 1].className; } array[array.length - 1].className = tmp; } function carousel() { permutateClassname(slideBgFigure); } setInterval(carousel, 3000);

 .slideshow__slide { overflow: hidden; height: 359px; position: relative; } .slide__bg { position: absolute; width: 100%; margin: 0; color: #fff; background: #333; overflow-x: hidden; -webkit-box-shadow: inset 0 0 0 1px #f0f0f0; box-shadow: inset 0 0 0 1px #f0f0f0; } .slide__bg img { display: block; opacity: .3; } .slide__bg { transition: transform 1.5s ease-in; } .slide__bg.slide-out { transform: translateX(-100%); z-index: 0; } .slide__bg.slide-in { transform: translateX(0); z-index: 2; } .slide__bg.middle { transform: translateX(0); z-index: 1; }

 <section class="slideshow__slide slide"> <figure class="slide__bg slide-out"> <img src="https://via.placeholder.com/620x200/070" /> </figure> <figure class="slide__bg slide-in"> <img src="https://via.placeholder.com/620x200/700" /> </figure> <figure class="slide__bg middle"> <img src="https://via.placeholder.com/620x200/007" /> </figure> </section>

Useful link: https://css-tricks.com/controlling-css-animations-transitions-javascript/