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

    @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)

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