Не все изображения видны на сайте слайдера изображений ⇐ CSS

[Anonymous]

Я работаю над веб-сайтом-слайдером изображений. У него две проблемы:

• Кнопка перемещения изображений вперед работает, но изображения не отображаются.
• Кнопка для перемещения изображений назад становится недоступной для нажатия, поскольку она находится за элементом изображения (даже если изображение не отображается).

Это код JavaScript :

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

    document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('.slider');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

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

window.addEventListener('load', updateSlider);
window.addEventListener('resize', updateSlider);

nextBtn.addEventListener('click', () => {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlider();
});

prevBtn.addEventListener('click', () => {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlider();
});

function updateSlider() {
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
// slider.style.transform = `translateX(-100%)`;
console.log(`Current Slide: ${currentSlide}`);
}

// Initial call to ensure the slider is set correctly on load
updateSlider();
});

URL-адрес codepen находится здесь: codepen
Я использовал console.log() для отладки и определил проблему, но не знаю, как найти решение.

Подробнее здесь: https://stackoverflow.com/questions/787 ... er-website