Почему при нажатии на кнопку слайдера картинка пропадает js?

Question

[Lu03]

Я новичок, туплю сильно.
Хочу сделать простой слайдер, 5 картинок, на каждой подпись.
Нашла пример в интернете, пыталась адаптировать под себя (там были не дивы, а просто img, я же хочу, чтобы был еще и текст).
Первый слайд загружается нормально, затем при перелистывании не происходит присваивание класса active, то есть насколько я понимаю, opacity по прежнему 0.
Помогите разобраться, в чем может быть проблема.

https://codepen.io/lizazhikhareva/pen/zYQGEJN

Answer 1

[Elaryks]

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

Comments

[Lu03]

спасибо большое, работает!

Answer 2

[Владимир Римидалв]

Привет!

Коммент выше решает твою проблему, а я с оффтопным моментом. Как-то странно что при движении влево переменная увеличивается, а при движении вправо уменьшается :D я бы поменял

upBtn.addEventListener("click", () => {
  let index = cardIndex + 1;
  if (index >= cards.length) {
    index = 0;
  }
  show(index);
});

downBtn.addEventListener("click", () => { 
  let index = cardIndex - 1;
  if (index < 0) {
    index = cards.length - 1;
  }
  show(index);
});

Comments

[Lu03]

Владимир, спасибо) Я тоже заметила, когда начала листать. Мне пока сложно все это видеть наперед, т.к. я только начинаю изучать js)