@Lirrr
Учусь вебу

Адаптивная высота для вертикального слайдера?

Есть структура с такой вложенностью:

<div class="swiper-container-services-info">
           <div class="swiper-wrapper">
           ...
              <div class="swiper-slide">
                 <div class="service-item"></div>
                 <div class="service-item"></div>
                 <div class="service-item"></div>
              </div>

              <div class="swiper-slide">
                 <div class="service-item"></div>
                 <div class="service-item"></div>
                 <div class="service-item"></div>
              </div>

           </div>
       </div>


Пытаюсь постепенно добраться от swiper-container до .service-item через children:

const sliderStudyInfo = document.querySelector('.swiper-container-study-info');
const wrapper = sliderServicesInfo.children[0];
const slide = wrapper.children;


1 вопрос: Как теперь получить массив из детей slide, чтобы его перебрать в цикле?
Хочу перебирать внутри конкретного слайдера все слайды, а в них все элементы. Далее получить сумму высот элементов внутри слайда и дать данную высоту для контейнера слайдера, в тот момент когда соответствующий слайд активный. Делаю так, потому что используется вертикальный слайдер, у которого элементы внутри слайдов состоят из текста и могут быть разной высоты и нужно постоянно подстраивать высоту контейнера слайдера.
2 вопрос: реально ли это вообще?
3 вопрос: есть ли более адекватные решения, как сделать вертикальный слайдер с адаптивной высотой в моей ситуации?
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
25 окт. 2020, в 17:16
150000 руб./за проект
25 окт. 2020, в 17:09
19999 руб./за проект
25 окт. 2020, в 17:04
3000 руб./за проект