Почему слайдер криво работает в модальном окне?

Question

[Максим Шадрин]

Использую в проекте слайдер owlcarousel2. Это jquery плагин.
Так же использую для галерей и модальных окон плагин Magnefic popup
Никак не могу наладить слайдер внутри модального окна. По сути работает, только когда каждому слайду и изображению внутри задать фиксированные размеры, а это совсем не комильфо. Не могу понять, почему он такую высоту задает по умолчанию мелкую.
в js такой код

$(".popup-block .slider").owlCarousel({
		items: 1,
		nav : true,
		navText : "",
		loop : true,
		dots: true,
		autoplay : false,
		autoplayHoverPause : true,
		fluidSpeed : 600,
		autoplaySpeed : 600,
		navSpeed : 600,
		dotsSpeed : 600,
		dragEndSpeed : 600
	});

Сам сайт здесь
Нужно кликнуть на кнопку подробнее в блоке строительство. Чуть чуть проскролив вниз сначала.

Comments

[Максим Шадрин]

Вопрос в догонку. У меня несколько модальных окон. Все они открываются по клику на кнопку класса .button
Так выглядит js код:

// popup windows
$('.button').magnificPopup({
		type: 'inline',
		preloader: false,
		callbacks: {
			open: function() {
				// Will fire when this exact popup is opened
				// this - is Magnific Popup object
				$(".popup-block .slider").owlCarousel({
					items: 1,
					nav : false,
					navText : "",
					loop : true,
					dots: true,
					autoplay : false,
					autoplayHoverPause : true,
					fluidSpeed : 600,
					autoplaySpeed : 600,
					navSpeed : 600,
					dotsSpeed : 600,
					dragEndSpeed : 600
				});
			},
			close: function() {
				// Will fire when popup is closed
			}
			// e.t.c.
		}
		// modal: true
});

Есть секция спа-бассейны, террасная доска, сауны и хаммамы. Каждый блок при клике пораждает модалку.
В текущем исполнении слайдер нормально инициализируется только в первом из открытых модальных окон. В остальных же так же поедет. Я почти уверен, что если написать 4 блока одинакового кода, заменив .button на уникальные айдишники для каждой из кнопок, то проблема исчезнет, но я хочу понять, почему происходит такой глюк при моей записи и можно ли его исправить, не городя избыточный код?
sandbox.maximshadrin.ru/aquanomika

Answer 1

[Сергей delphinpro]

Инициализировать карусель нужно после открытия попапа. Посмотрите доку магнифика - там возможно есть событие, которое вызывается после открытия окна, вот в нем и делайте инициализацию карусели.

Когда вы инициализируете карусель с закрытым окном, она берет размеры у скрытого дива. У таких нет размеров. и карусель ставит ширину по дефолту.

Comments

[Максим Шадрин]

Спасибо, то, что нужно. У магнифика есть колбек на открытие окна, туда и повесил инициализацию слайдера и все заработало

Answer 2

[Minary]

У Вас для класса .owl-item задано - width: 100px;

Comments

[Максим Шадрин]

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