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

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

<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 вопрос: есть ли более адекватные решения, как сделать вертикальный слайдер с адаптивной высотой в моей ситуации?
  • Вопрос задан
  • 832 просмотра
Решения вопроса 1
@Maxim_Ivanov15
Может я не совсем правильно отвечу на твой вопрос, но думаю чем-то помогу.
У меня была подобная ситуация, вот html и js код
<div class="about__text text-about">
	<div class="text-about__slider">
		<div class="text-about__swiper">
			<div class="text-about__slide">
				<div class="text-about__content">текст разной высоты</div>
			</div>
		        <div class="text-about__slide">
				<div class="text-about__content">текст разной высоты</div>
			</div>
		</div>
	</div>
	<div class="text-about__next _icon-arrow-bottom">Далее</div>
	<div class="text-about__prev _icon-arrow-bottom">Назад</div>
</div>

window.addEventListener('load', function () {
	const aboutSlider = document.querySelector('.text-about__slider');
	const aboutSlides = document.querySelectorAll('.text-about__slide');
	const aboutContent = document.querySelectorAll('.text-about__content');
	if (aboutSlider && aboutSlides.length > 0 && aboutContent.length > 0 && window.matchMedia("(max-width: 619.98px)").matches) {
		aboutSlides.forEach(slide => {
			slide.style.height = aboutContent[0].offsetHeight + 'px';
		});
		aboutSlider.style.height = aboutContent[0].offsetHeight + 'px';
	}
});

Это пример как через js я смог задавать высоту слайдера и слайдов, константы это соотвественно слайдер, слайд и обёртка текста внутри слайда. Обёртка является самым важным элементом в данной ситуации, потому что при direction: 'vertical' слайды ведут себя очень странно, а высота обёртки будет постоянно равняться высоте текста внутри, и при загрузке странички я задавал высоту слайдера и слайда такую же как у обёртки, но это всё ещё не адаптивно, потому что высота будет постоянно равняться высоте первого слайда.
Для адаптивности можно искать самую высокую обёртку текста и задавать её высоту для слайдера и слайдов, вот функциия, которая ищет самое большое число из списка:
function getMaxOfArray(numArray) {
	return Math.max.apply(null, numArray);
}

Нужно просто перебрать список с обёртками для текста, а именно .text-about__content и в новый список добавить их высоты, а потом вызвать указаную выше функцию вписав новый список с высотами.
heights = []
aboutContent.forEach(element => {
	let height = element .offsetHeight
	heights.push(height)
});
getMaxOfArray(heights)

так оно найдёт самый высоки слайд и задаст его высоту слайдеру
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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