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

Почему на мобильных устройствах не срабатывает vertical: false в slick slider?

Есть slick slider, который по умолчанию на десктопе отображается вертикально. В responsive поставил свойство vertical: false Но слайдер прокручивает все равно вертикально
galleryThumbs.slick({
		slidesToShow: 5,
		slidesToScroll: 1,
		asNavFor: gallerySlides,
		arrows: true,
		vertical: true,
		dots: false,
		focusOnSelect: true,
		mobileFirst: true,
		appendArrows:'.slider-arrows',
		nextArrow: slickNextGallery,
		prevArrow: slickPrevGallery,
		variableWidth: true,
		infinite: false,
		responsive: [{
			breakpoint: 480,
			settings: {
			  vertical: false,
			}
		  }
		}]
	  });

Пробовал добавлять display: flex; классу .slick-track, но все равно прокрутка вертикальная

@media (max-width:767px) {
.product-page__preview-slider .slick-track {
  display: flex !important;
  }  
}

64c60cd8e601b481232973.png

По идее должен убираться класс .slick-vertical, но этого не происходит.
Благодарен за помощь!
  • Вопрос задан
  • 52 просмотра
Подписаться 1 Средний Комментировать
Решения вопроса 1
@Minusator Автор вопроса
Вопрос решил. Выставил по умолчанию vertical: false, а в responsive прописал когда он должен быть включен или выключен

galleryThumbs.slick({
		slidesToShow: 5,
		slidesToScroll: 1,
		asNavFor: gallerySlides,
		arrows: true,
		vertical: false,
		dots: false,
		focusOnSelect: true,
		mobileFirst: true,
		appendArrows:'.slider-arrows',
		nextArrow: slickNextGallery,
		prevArrow: slickPrevGallery,
		variableWidth: true,
		infinite: false,
		responsive: [{
			breakpoint: 380,
			settings: {
			  infinite: true,
			}
		  },{
			breakpoint: 768,
			settings: {
			  infinite: false,
			}
		  },{
		  breakpoint: 991,
		  settings: {
			vertical: true,
			variableWidth: false
		  }
		}]
	  }); 
	});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы