@Lu03

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

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

https://codepen.io/lizazhikhareva/pen/zYQGEJN
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
Elaryks
@Elaryks
Картинки переключаются (это видно, если убрать overflow: hidden у .card-list). Просто они расположены в столбик, который ограничен по высоте, при этом неактивные карточки занимают своё положение в документе даже при opacity: 0. Вероятно, вы где-то пропустили часть логики или стилей, чтобы первая картинка заменялась на активную картинку. Поскольку у карточек в вашем примере размеры одинаковые, достаточно заменить position: relative на position: absolute у .card.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
pickHabr
@pickHabr
Костыльных дел мастер
Привет!

Коммент выше решает твою проблему, а я с оффтопным моментом. Как-то странно что при движении влево переменная увеличивается, а при движении вправо уменьшается :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);
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы