Slick слайдер в модальном окне bootstrap / slick slider in modal bootstrap

Про установку на Ваш сайт самого slick slider можете посмотреть по этой ссылке.Часто бывают случаи когда нужно задействовать Slick слайдер в модальном окне bootstrap, сделать карусель товаров либо просто слайд шоу фотографий с помощью slick slider. Но вы можете столкнуться с такой проблемой, когда slick слайдер при открытии неправильно отображаеться, либо его совсем не видно. Но если нажать по кнопке перехода на следующий слайд, все становиться на свои места. Дело в том что самого слайдера изначально не видно и при его инициализации он неправильно рассчитывает размеры самих слайдов. Поэтому нужно его перепозиционировать после показа модалки, либо перезагрузить его.

$('.modal').on('shown.bs.modal', function (e) {
  $('.your-class').slick('setPosition');
})

В коде написано что при открытии самого модального окна идет перепозиционирование slick slider. Смотрите сам пример:

See the Pen Slick slider inside bootstrap modals by Хміль Діма (@dmondma) on CodePen.dark

Чтобы Slick слайдер в модальном окне bootstrap плавно работал, я дописал такую строчку $(‘.wrap-modal-slider’).addClass(‘open’); (вы можете ее не использовать). Без нее будет видно как карусель резко перескакивает, мне это показалось некрасиво. Поэтому я сначала ее скрыл через opacity: 0; а при открытии добавляю клаcс в котором прописал opacity: 1;