Как сделать в slick карусели adaptiveHeight?

Question

[Андрей]

Подскажите можно ли сделать адаптивную высоту для слайдера Slick если не Single slide?
https://jsfiddle.net/5ox31m2a/111/

Answer 1

[Дмитрий Мельник]

https://jsfiddle.net/5ox31m2a/149/

Можно еще повесить событие на клик и свайп.
На клик:

$('.slick-arrow').on('click', function(){
	var heights = []; 
	$('.slick-active').each(function(){
		heights.push($(this).height());
	});
	$('#slider').height(Math.max.apply(null, heights));
});

На свайп - уже через функции слайдера

Comments

[Андрей]

это работает только для слайдера а не карусели

[Дмитрий Мельник]

Вот так работает, только версия slick не ниже 1.4 должна быть

[Андрей]

Дмитрий Мельник: да это то что нужно. жаль что изменение высоты не срабатывает во время передвижение а не после

[Дмитрий Мельник]

можно попробовать повесить событие пересчета высоты на события свайпа или клика по переключалкам, код будет длиннее, но работать будет, добавил пример кода в ответе

Answer 2

[HamSter]

adaptiveHeight: true

Comments

[Андрей]

нет, это работает только если один слайд на экране

[HamSter]

Андрей: тогда попробовать оборачивать по 3 item и slidesToShow: 1,
slidesToScroll: 1 тогда задавать.

[Андрей]

HamSter: тогда нельзя будет листать по одному слайду карусель

[HamSter]

Андрей: так у вас же скролл на 3 изображения)

[Андрей]

HamSter: это я просто пример нашел в интернете, не заметил что там по 3

[HamSter]

Андрей: ну тогда сдаюсь)

Answer 3

[Андрей]

.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}