Столкновение слайдера на JS ⇐ Javascript

[Anonymous]

Я пытался создать простой слайдер с помощью JavaScript, но когда я запустил код, слайд выглядел сложенным сзади, и его нужно было переместить влево, чтобы слайдер оставался в своем предыдущем положении, меняясь только и появляясь посередине.< /p>
Слайды складываются друг на друга, и если я добавлю более 3 [*], слайды будут располагаться слева.
Вот мой код с использованием Tailwind:


let currentIndex = 0;
const totalSlides = document.querySelectorAll('.slides li').length;

function showSlide(index) {
const slides = document.querySelector('.slides li');
const slideList = document.querySelectorAll('.slides li');
// ensure the index is within a valid range
if (index < 0) {
currentIndex = totalSlides - 1; // If earlier, go back to the last slide
} else if (index >= totalSlides) {
currentIndex = 0; // If next, go back to the first slide
} else {
currentIndex = index;
}
// Set the active class

slideList.forEach((slide, index) => {
slide.style.zIndex = ''
if (index === currentIndex) {
slide.style.transform = `translateX(${-100+1*100}px)`
slide.style.zIndex = '1'
} else if (index < currentIndex) {
var sl = `translateX(${100}px) scale(0.75)`
slide.style.transform = sl
} else {
var sla = `translateX(${-100}px) scale(0.75)`

slide.classList.add('active');
slide.style.transform = sla
}
});
}

function nextSlide() {
currentIndex = (currentIndex + 1) % totalSlides; // Return to first slide
showSlide(currentIndex);
}

function prevSlide() {
showSlide(currentIndex - 1);
}
// Interval untuk slide otomatis
setInterval(nextSlide, 4000);< /code>
.slides li{
display: flex;
transition: transform 3s linear;
}
.slide li img {
width: 100%;
display: block;
transition: all 500ms ease;
animation-timing-function: linear;
}< /code>




Document

• 
• 
• 

< /code>
< /div>
< /div>
< /p>
Как к слайдам не столкнутся, а также можно перемещать с помощью курсора ?


Подробнее здесь: https://stackoverflow.com/questions/793 ... ider-on-js