Почему при использовании JavaScript и нажатии на кнопку слайдера изображение исчезает?

При использовании JavaScript и нажатии на кнопку слайдера изображение исчезает вероятно из-за того, что не правильно настроены классы или стили, которые меняют свойство отображения изображения.

Чтобы настроить слайдер с пятью картинками и подписями на каждой, вы можете внести изменения в ваш код HTML и CSS, чтобы каждому изображению соответствовала своя подпись. 

Что касается проблемы с присваиванием класса active при перелистывании и сохранения opacity на 0, возможно, это связано с неправильными стилями или событиями в вашем JavaScript коде. 

Я посмотрел ваш пример на Codepen и могу предложить вам следующие шаги для решения проблемы:

1. Убедитесь, что у всех изображений и подписей в слайдере установлен правильный класс и начальные стили.
2. В вашем JavaScript коде, который отвечает за переключение слайдов, убедитесь, что после смены слайда устанавливается правильный класс active и opacity.
3. Попробуйте упростить свой код и поэтапно проверить каждый шаг, чтобы понять, в каком месте возникает проблема.

Также, не забудьте проверить консоль браузера на наличие ошибок, которые могут помочь вам понять, где именно возникает проблема.

Надеюсь, эти советы помогут вам разобраться с проблемой и успешно настроить свой слайдер. Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь задавать их.

Картинки переключаются (это видно, если убрать overflow: hidden у .card-list ). Просто они расположены в столбик, который ограничен по высоте, при этом неактивные карточки занимают своё положение в документе даже при opacity: 0 . Вероятно, вы где-то пропустили часть логики или стилей, чтобы первая картинка заменялась на активную картинку. Поскольку у карточек в вашем примере размеры одинаковые, достаточно заменить position: relative на position: absolute у .card .