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

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

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

52fb3f7c999d4336a30238fc7a9e6ebd.png

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

Подскажите как можно сделать так чтобы картинки появлялись сразу.
  • Вопрос задан
  • 17968 просмотров
Решения вопроса 1
@PerfectLab
Попробуйте инициализировать слайдер после клика на таб:
$(".slider").slick('reinit');
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
UDAV99
@UDAV99
web программист, верстальщик
/* 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...
Ответ написан
Velimudr1
@Velimudr1
Человек
Проще изменить одно состояние.
Попробуйте переопределить display:none на visibility: hidden
Таким образом слайдер будет видеть открытый блок и всё будет работать. Только не активным блокам лучше принудительное значение height на ноль поставить, а активному auto. Иначе будут зарезервированные пробелы от остальных блоков ))
Ответ написан
Sky_Red
@Sky_Red
Нечто
$('.slider.slick-initialized').slick("setPosition");
Ответ написан
HamSter007
@HamSter007
HTML/CSS верстальщик
Если не ошибаюсь, то это как раз из-за display:none;
Я так для модального пыталась сделать, пока не убрала это свойство, не заработал слайдер!
Ответ написан
Комментировать
@ljutaev
html-програмист
.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, что-б не оставались пробелы от блоков
Ответ написан
@deadsandro
Обычно такие моменты решаются инициализацией сначала слайдера, потом табов. Если плагин "не умеет" работать с скрытыми элементами, сначала кормим его "видимым" блоком, а потом скрываем. В данном случае, если табы сделаны на плагинах, то просто переместить их инициализацию после слайдера, если табы например полностью на css, то понадобится после инициализации добавлять класс для "включения" табов.

Но суть, думаю, ясна - когда вы запускаете слайдер, элементы не должны быть скрыты.
Ответ написан
Комментировать
Попадал в такую же ситуацию с Bootstrap 3 табами.
Решение нашлось в репозитории, описал свой вариант в статье на блоге
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы