Problem with changing slides in carousel, written only in js and css

Question

Sorry for the possible duplication, but I did not find a solution to my problem. About my problem. I am trying to create a slide carousel using only js and css. What I need is an alternation of slides when we press the “forward” or “back” buttons (for example, the previous slide goes off to the left, while the new slide simultaneously appears from the right when “forward” is pressing).

The code is here:

 var slideIndex = 0; var prev_slideIndex = slideIndex; function myanimate() { str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex; var slides = document.getElementsByClassName("child"); for (var i = 0; i < slides.length; i++) slides[i].style.display = "none"; if (prev_slideIndex < slideIndex) { if (slideIndex > 3) slideIndex = 0; slides[prev_slideIndex].style.left = '-100%'; slides[prev_slideIndex].style.marginleft = '0%'; slides[slideIndex].style.left = '0%'; slides[slideIndex].style.marginleft = '0%'; slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s'; } else { if (slideIndex < 0) slideIndex = 3; slides[prev_slideIndex].style.left = '100%'; slides[prev_slideIndex].style.marginleft = '0%'; slides[slideIndex].style.left = '0%'; slides[slideIndex].style.marginleft = '0%'; slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s'; } slides[prev_slideIndex].style.display = 'block'; slides[slideIndex].style.display = 'block'; prev_slideIndex = slideIndex; str += ' final prev_slideIndex=' + prev_slideIndex; document.getElementById("text").innerHTML = str; }

 .parent { background-color: red; display: block; position: relative; width: 600px; height: 100px; padding-top: 10px; padding-bottom: 10px; overflow: hidden; } .child { background-color: green; display: block; position: absolute; width: 100%; height: 100px; color: #FFFFFF; font-size: 24px; text-align: center; } @keyframes caroussel { from { margin-left: 100% } to { margin-left: 0% } } @keyframes caroussel_back { 0% { margin-left: -100% } 100% { margin-left: 0% } }

 <input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();"> <input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();"> <br> <div class="parent"> <div class="child" style="background-color:yellow;left:0%;"> Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption </div> <div class="child" style="left:100%;"> Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption </div> <div class="child" style="background-color:magenta;left:100%;"> Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption </div> <div class="child" style="background-color:cyan;left:100%;"> Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption </div> </div> <br> <span id="text"></span>

It works correctly if we press the “forward” and “back” buttons alternately (we can observe two slides), but it works incorrectly if we press one of these buttons several times (the previous slide disappears).

Does anyone know why it doesn't work correctly or maybe there are any ideas how to improve the code?

Thank you in advance.

I tested in Firefox 74.0 (32bit). 'transform: translateX(...)' in css gives me the same behavior.

Answer 1

The slide with the prev_slideIndex already got the same value for the animation on the previous iteration of the carousel. Therefore you need to use reflow to force this slide to play the same animation one more time:

slides[prev_slideIndex].offsetHeight; /* trigger reflow */

 var slideIndex = 0; var prev_slideIndex = slideIndex; function myanimate() { str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex; var slides = document.getElementsByClassName("child"); for (var i = 0; i < slides.length; i++) slides[i].style.display = "none"; if (prev_slideIndex < slideIndex) { if (slideIndex > 3) slideIndex = 0; slides[prev_slideIndex].style.left = '-100%'; slides[prev_slideIndex].style.marginleft = '0%'; slides[slideIndex].style.left = '0%'; slides[slideIndex].style.marginleft = '0%'; slides[prev_slideIndex].offsetHeight; /* trigger reflow */ slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s'; } else { if (slideIndex < 0) slideIndex = 3; slides[prev_slideIndex].style.left = '100%'; slides[prev_slideIndex].style.marginleft = '0%'; slides[slideIndex].style.left = '0%'; slides[slideIndex].style.marginleft = '0%'; slides[prev_slideIndex].offsetHeight; /* trigger reflow */ slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s'; } slides[prev_slideIndex].style.display = 'block'; slides[slideIndex].style.display = 'block'; prev_slideIndex = slideIndex; str += ' final prev_slideIndex=' + prev_slideIndex; document.getElementById("text").innerHTML = str; }

 .parent { background-color: red; display: block; position: relative; width: 600px; height: 100px; padding-top: 10px; padding-bottom: 10px; overflow: hidden; } .child { background-color: green; display: block; position: absolute; width: 100%; height: 100px; color: #FFFFFF; font-size: 24px; text-align: center; } @keyframes caroussel { from { margin-left: 100% } to { margin-left: 0% } } @keyframes caroussel_back { 0% { margin-left: -100% } 100% { margin-left: 0% } }

 <input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();"> <input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();"> <br> <div class="parent"> <div class="child" style="background-color:yellow;left:0%;"> Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption </div> <div class="child" style="left:100%;"> Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption </div> <div class="child" style="background-color:magenta;left:100%;"> Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption </div> <div class="child" style="background-color:cyan;left:100%;"> Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption </div> </div> <br> <span id="text"></span>