Как совместить галерею Slick с модальным окном?

Question

[Дмитрий]

Сам делаю лендинг и столкнулся с проблемой.
Тест тут.

Использую Slick для реализации галереи. Как видите, внизу есть отзывы, в них первый слайд отлично загружается.
Если нажать на кнопку "Подробнее" на первом товаре, тогда открывается модальное окно, реализованное на bootstrap.
В него я загрузил еще одну галерею Slick(уже с другим идентификатором), но первое изображение не загружается, пока не кликнешь по навигационным кнопкам снизу или по бокам.
Вопрос, как совместить bootsrap и slick и заставить работать слайдер в модальном окне? Что мешает загрузиться картинке сразу?

Answer 1

[Егор Живагин]

Изначально у скрытой картинки ширина 0. В этот момент у вас и отрабатывает инициализация слайдера.
Решение - инициализировать или ресайзить (гляньте в доках) слайдер при открытии модалки

В вашем тесте проблемы не видно, там fancybox слайдер

Comments

[Дмитрий]

нет, речь идет о модальном окне. Когда тыкаешь уже по картинке тогда да - fancybox срабатывает. он нормально работает.
Я вот о чем говорю:

[Дмитрий]

И если я ставлю фиксированную ширину, изображение получается смещенным и при переключении на следующие слайды, бардак идет (второй слайд идет откуда то сверху слева..)

[Егор Живагин]

liggth, понял, но я всё равно дал ответ - инициализируйте этот слайдер не при загрузке страницы, а при открытии модалки.

[Дмитрий]

Егор Живагин, а как это сделать?

[Дмитрий]

Вопрос отпал.