When the condition is that the slider should be fixed and switched by pressing a button, each component works fine individually but breaks when used together. The issue arises when the first slide appears and the buttons work, but once the animation transitions to the second slide, the button functionality stops. Pressing a button should switch back to the corresponding slide, however, it only works if the other button is pressed first.
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) {
slide2.classList.add("display-slide-2");
slide1.classList.add("display-slide-1");
});
toggle2.addEventListener("click", function(event) {
slide2.classList.add("display-slide-1");
slide1.classList.add("display-slide-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;
}
...
<div class="slider-promo">
<div class="slide-item first display-slide-1">
<div class="name">
<h3>First slide</h3>
<span>Lorem lorem lorem</span>
</div>
<a href="" class="btn">More info</a>
</div>
<div class="slide-item second display-slide-2">
<div class="name">
<h3>Second slide</h3>
<span>Lorem lorem lorem</span>
</div>
<a href="" class="btn">More info</a>
</div>
<div class="toggle">
<div class="label slide-1"></div>
<div class="label slide-2"></div>
</div>