By condition, the slider should be looped and also be switched by pressing the buttons. Separately, everything works with a bang, and together it breaks. The situation is this ... When the slider is just starting to work and the first slide appears, switching the buttons is triggered. But as soon as a part of the animation is executed and the first one is replaced by the second slide, it stops working. More precisely - if there is a second slide, then when you click on the first button, the first one should turn on, but it does not work ... and it starts working only if you press the second button before. Similarly for another slide ...

var toggle1 = document.querySelector(".slide-1"); var toggle2 = document.querySelector(".slide-2"); var slide1 = document.querySelector(".first"); var slide2 = document.querySelector(".second"); toggle1.addEventListener("click", function(event) { // event.preventDefault(); // slide2.classList.add("display-slide-1"); // slide1.classList.add("display-slide-2"); // slide2.classList.remove("display-slide-2"); // slide1.classList.remove("display-slide-1"); // slide2.classList.add("display-2"); // slide1.classList.add("display-1"); slide2.classList.add("display-slide-2"); slide1.classList.add("display-slide-1"); // slide2.classList.remove("display-slide-1"); // slide1.classList.remove("display-slide-2"); // // slide2.classList.remove("display-2"); // slide1.classList.remove("display-1"); }); toggle2.addEventListener("click", function(event) { // event.preventDefault(); // slide2.classList.add("display-slide-2"); // slide1.classList.add("display-slide-1"); // slide2.classList.remove("display-slide-1"); // slide1.classList.remove("display-slide-2"); // slide2.classList.add("display-1"); // slide1.classList.add("display-2"); slide2.classList.add("display-slide-1"); slide1.classList.add("display-slide-2"); // slide2.classList.remove("display-slide-2"); // slide1.classList.remove("display-slide-1"); // slide2.classList.remove("display-1"); // slide1.classList.remove("display-2"); }); 
 .promo .slider-promo { position: relative; display: inline-block; float: left; width: 620px; height: 265px; background-color: #f2f6f8; margin-right: 20px; color: #fff; font-family: "CuprumRegular"; font-size: 18px; line-height: 24px; overflow: hidden; } .slider-promo .slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/promo-slide-1.jpg) no-repeat top left; } .slider-promo .second { /* display: none;*/ background: url(../img/promo-slide-2.jpg) no-repeat top left; } .slider-promo .toggle { position: absolute; z-index: 100; bottom: 35px; left: 50%; margin-left: -40px; width: 80px; height: 11px; } .slider-promo .label { display: inline-block; width: 10px; height: 10px; background-color: #fff; border: 2px solid #fff; border-radius: 50%; cursor: pointer; margin-right: 10px; } @keyframes first-animation { 0% { left: 0; z-index: 2; display: block; } 40% { left: 0; } 50% { left: -620px; } 51% { left: -620px; z-index: 1; } 52% { left: 620px; } 90% { left: 620px; } 100% { left: 0px; } } @keyframes second-animation { 0% { left: -620px; z-index: 1; display: block; } 1% { left: 620px; } 40% { left: 620px; z-index: 2; } 50% { left: 0; } 90% { left: 0; } 100% { left: -620px; } } .display-slide-1 { animation: first-animation 12s linear infinite; } .display-slide-2 { animation: second-animation 12s linear infinite; } 
 <div class="slider-promo"> <div class="slide-item first display-slide-1"> <div class="name"> <h3>перфораторы</h3> <span>Настоящие мужские игрушки</span> </div> <a href="" class="btn">открыть каталог</a> </div> <div class="slide-item second display-slide-2"> <div class="name"> <h3>дрели</h3> <span>Соседям на радость</span> </div> <a href="" class="btn">открыть каталог</a> </div> <div class="toggle"> <div class="label slide-1"></div> <div class="label slide-2"></div> </div>

    1 answer 1

    You need to first do

     slide2.classList.remove('display-slide-1');

    before

     slide2.classList.add("display-slide-2");

    And also for every slide and every event. Otherwise, your slides have display-slide-1 and display-slide-2 right away. You can see, everything works https://jsfiddle.net/w4jbjyhp/

    • I tried to do this ... If you look, I deliberately left the commented lines that I tried ... I tried to imitate pressing the second button - add opposing classes, then delete them and put the necessary ones ... But somehow, to no avail. And it still doesn’t work for you (Try to run the code, wait for the "punchers" to be replaced by the "drills" and press the first button - it does not work - illia_6655321
    • So you have one button and should not work. One button always shows the active slide. - Andrii Kulyk
    • yes ... but when the active slide is the second, and the first button does not work. And it works only if you press the second one first, which is active, and then the first. - illia_6655321