Не могу перейти к предыдущему слайду на слайдере JavaScript ⇐ CSS

[Anonymous]

У меня есть слайдер с разными слоями. Позже в слоях будет вставлен какой -то текст. Слои должны выглядеть как листы, лежащие друг на друга. С помощью кнопок для предыдущего и следующего я хочу прыгать между слоями. < /P>
Следующая кнопка работает нормально. Предыдущая кнопка не работает. Что не так? JS Lang-Js PrettyPrint-Override ">

Код: Выделить всё

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

function updateSlides() {
slides.forEach((slide, index) => {
if (index < currentIndex) {
slide.style.width = '0%';
slide.style.left = '0%';
slide.style.opacity = '0';
slide.style.visibility = 'hidden';
slide.style.transition = 'all 0.5s ease-out';
} else if (index === currentIndex) {
slide.style.right = '100%';
slide.style.opacity = '1';
slide.style.visibility = 'visible';
slide.style.transition = 'all 1s ease-out';
} else {
slide.style.opacity = '1';
slide.style.visibility = 'visible';
slide.style.transition = 'all 1s ease-out';

}
});
}

// Function for next slide (move forward)
function nextSlide() {
if (currentIndex < totalSlides - 1) {
currentIndex++;
updateSlides();
}
}

// Function for previous slide (move backward)
function prevSlide() {
if (currentIndex > 0) {
currentIndex--;
updateSlides();
}
}

// Event listeners for the navigation buttons
document.querySelector('.next-button').addEventListener('click', nextSlide);
document.querySelector('.prev-button').addEventListener('click', prevSlide);

// Optionally, use the automatic slider function (if you want both auto and manual navigation)
//setInterval(() => {
//  nextSlide(); // This will trigger auto-sliding
//}, 3000);< /code>
.prev-button,
.next-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 1.5em;
z-index: 10;
}

.prev-button {
left: 10px;
}

.next-button {
right: 10px;
}

.slider-container {
width: 100%;
overflow: hidden;
position: relative;
height: 280px;
}

.slider {
position: relative;
height: 100%;
width: 100%;
/* Enough space for all 4 slides */
display: flex;
transition: transform 3s ease-in-out;
}

.slide {
position: absolute;
height: 100%;
transition: width 3s ease-in-out, left 3s ease-in-out;
}

.slide.yellow {
z-index: 4;
left: 0%;
width: calc(100% - 60px);
}

.slide.pink {
z-index: 3;
left: 0%;
width: calc(100% - 40px);
}

.slide.blue {
z-index: 2;
left: 0%;
width: calc(100% - 20px);
}

/* The background slide */
.slide.green {
z-index: 1;
left: 0%;
width: 100%;
}< /code>

Previous
Next



yellow
 

pink
 

blau
 

green
 

Подробнее здесь: https://stackoverflow.com/questions/794 ... ipt-slider