Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X
  • Главная
  • Блог
  • Slick слайдер в модальном окне bootstrap / slick slider in modal bootstrap

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;

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X