Как решить проблему с отображением слайдера Slick?

Question

[AlexRas]

Здравствуйте, проблема такая.

Есть два таба, в обоих табах есть слайдер slick.



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

Подскажите как можно сделать так чтобы картинки появлялись сразу.

Answer 1

[PerfectLab]

Попробуйте инициализировать слайдер после клика на таб:
$(".slider").slick('reinit');

Comments

[Юрий]

Спасибо тебе, добрый человек! Ваш способ решил описанную проблему! ;)

[ruslan2243]

И мне помогло

[Евгений Карпюк]

Не могли, бы вы, поподробнее, куда пихать реиницилизацию?
$('.tabs1').on('click', function (e) {
$(".gallery").slick('reinit');
});
Сделал так, но при перелистывании добавляются лишние точки в слайдере....

[AlexRas]

Евгений Карпюк: Нужно видеть во что пихать, чтобы сказать куда конкретно)

[Евгений Карпюк]

AlexRas: Что конкретно интересует? табы jquery lightTabs

[IldarGilyazev]

Спасибо, долго искал решение своей проблемы и нашёл))

[andryfurkt]

Огромное спасибо. Решение помогло. Это восхитительно)

[LittleKitten]

после долгих поисков в гугл нашел тут решение, спасибо большое и респект

Answer 2

[Сергей]

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: block;    /* undo display:none          */
    height: 0;         /* height:0 is also invisible */
    //overflow: hidden;  /* no-overflow                */
}
.tab-content > .active, .pill-content > .active {
    height: auto;      /* let the content decide it  */
} /* bootstrap hack end */

https://github.com/kenwheeler/slick/issues/187#iss...

Comments

[ljutaev]

спасибо!

Answer 3

[Тимур Орлов]

Проще изменить одно состояние.
Попробуйте переопределить display:none на visibility: hidden
Таким образом слайдер будет видеть открытый блок и всё будет работать. Только не активным блокам лучше принудительное значение height на ноль поставить, а активному auto. Иначе будут зарезервированные пробелы от остальных блоков ))

Comments

[ohikoshimi]

Спасибо большое! Решила свою задачу с вашей помощью =)

[Тимур Орлов]

ohikoshimi, Ещё вариант есть, инициировать слайдер повторно, при открытии модального окна, тогда он начинает пересчёт параметров и открывается с обновлёнными данными.
К примеру, так:

$('.go').click(function(){
	var gtwm=$('.goTWModal');
	if($(gtwm).is(':visible')){
		setTimeout(function(){
			$(".slick-slider").slick('setPosition');
			$(window).resize();
		},500);
	}
});

Как видишь, событие нажатия вызывает модальное окно (у меня открытие модальки происходит в другой функции, а тебя должно быть по своему, или в этой дописать код), проверяет открыто ли (visible) и производит действия после заданного времени. Время должно быть не меньше того, сколько отводится на открытие модального окна.

Answer 4

[Felicia Mad]

$('.slider.slick-initialized').slick("setPosition");

Comments

[DrVeles]

этот вариант намного лучше, в плане скорости, чем первый. Спасибо, ради Вас зарегался на Хабре

Answer 5

[HamSter]

Если не ошибаюсь, то это как раз из-за display:none;
Я так для модального пыталась сделать, пока не убрала это свойство, не заработал слайдер!

Answer 6

[ljutaev]

.tab-content
	display: flex
	flex-direction: column
		
.tab-content > .tab-pane
	display: block !important
	height: 0

.tab-content > .active 
	display: block !important
	height: auto

долго с этим возился может кому-то понадобится! Решение для bootstrap 4, что-б не оставались пробелы от блоков

Comments

[Евгений Сидаш]

Спасибо тебе, святой человек!

Answer 7

[Евгений]

Обычно такие моменты решаются инициализацией сначала слайдера, потом табов. Если плагин "не умеет" работать с скрытыми элементами, сначала кормим его "видимым" блоком, а потом скрываем. В данном случае, если табы сделаны на плагинах, то просто переместить их инициализацию после слайдера, если табы например полностью на css, то понадобится после инициализации добавлять класс для "включения" табов.

Но суть, думаю, ясна - когда вы запускаете слайдер, элементы не должны быть скрыты.

Answer 8

[Сергей Мочалов]

Попадал в такую же ситуацию с Bootstrap 3 табами.
Решение нашлось в репозитории, описал свой вариант в статье на блоге