I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like a left to right animation similar to an image strip rather than ease animation)
Here are the JS, CSS, and HTML codes:
var slides = document.querySelectorAll('.slide');
var next = document.getElementById('next');
var back = document.getElementById('back');
let currentSlide = 0;
var manualNav = function(manual) {
slides.forEach((slide) => {
slide.classList.remove('active');
});
slides[manual].classList.add('active');
}
next.addEventListener('click', function() {
if (currentSlide != slides.length - 1) {
currentSlide++;
manualNav(currentSlide);
}
})
back.addEventListener('click', function() {
if (currentSlide != 0) {
currentSlide--;
manualNav(currentSlide);
}
})
var repeat = function(activeClass) {
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function() {
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
i++;
if (slides.length == i) {
i = 0;
}
if (i >= slides.length) {
return;
}
repeater();
}, 10000);
}
repeater();
}
repeat();.gallery {
width: 50%;
height: 340px;
display: flex;
align-items: center;
flex-direction: column;
}
.gallery .content {
position: relative;
width: 564px;
height: 297px;
}
.gallery .content .slide {
display: none;
transition: all 1s ease-in;
}
.gallery .content .slide img {
width: 100%;
height: 297px;
object-fit: cover;
}
.gallery .content .slide.active {
display: block;
}
.gallery .content .firstSvg {
position: absolute;
right: 80px;
bottom: 24px;
cursor: pointer;
height: 50px;
width: 50px;
background-color: orange;
}
.gallery .content .lastSvg {
cursor: pointer;
position: absolute;
right: 24px;
bottom: 24px;
height: 50px;
width: 50px;
background-color: wheat;
}<div class="gallery" id="gallery">
<div class="content">
<div class="slide active">
<img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
</div>
<div class="slide">
<img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
</div>
<div class="slide">
<img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
</div>
<div class="firstSvg" id="back">back</div>
<div class="lastSvg" id="next">next</div>
</div>
</div>