Witam, mam problem odnośnie dodania prostej animacji przejścia jednego zdjęcia w kolejne na sliderze. Chodzi o to, że za każdym razem po wciśnięciu na strzałkę w lewo lub w prawo chciałbym nadać jakieś lekkie opacity na kolejny element img żeby zmiana nie była natychmiastowa tylko np. 0.5s. Napisałem sobie taki kodzik w jsie:
function slideLeft() {
slideAnim();
index--;
if (index < 0) {
index = photos.length - 1;
actualSlide.src = photos[index];
} else {
actualSlide.src = photos[index];
}
}
function slideRight() {
slideAnim();
if (index == photos.length - 1) {
index = -1;
}
index++;
actualSlide.src = photos[index];
}
function slideAnim() {
actualSlide.classList.toggle('active');
}
leftBar.addEventListener('click', slideLeft)
rightBar.addEventListener('click', slideRight)
W cssie mam:
.slide {
width: 100%;
height: 100%;
}
.slide.active {
animation: slide .5s linear;
}
@keyframes slide {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
Odwołuję się do znacznika img o klasie .slide:
<div class="sliderBox clearfix">
<div class="barL"><i class="fas fa-angle-left"></i></div>
<div class="slider"><img class="slide" src="img/projects/1.jpg" alt="furniture"></div>
<div class="barR"><i class="fas fa-angle-right"></i></div>
</div>
Problem polega na tym, że animację dodaje mi tylko na co drugie zdjęcie, rozumiem że to przez metodę toggle. Teraz pojawia się pytanie jak dodawać animację za każdym razem.