Задать вопрос

Maxim_Ivanov15

Информация
Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (1)

Лучшие ответы пользователя

Все ответы (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)

    так оно найдёт самый высоки слайд и задаст его высоту слайдеру
    Ответ написан
    1 комментарий
    1 комментарий