Почему слайдер Swiper инициализируется только после ресайза?

Question

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

Сверстал страничку sandbox.maximshadrin.ru/vologda_lessons/main.html
На ней много слайдеров. Для них использую компонент swiper idangero.us/swiper/demos
Есть проблема с одним из слайдов.
Не могу понять, почему она выплывает.
В разделе Экскурсии при клике на 1ый блок открывается попап.



Данный попап уже есть на странице, просто скрыт и при клике отображается, т.е. проблем, связанных с динамической ajax загрузкой контента в попап быть не может, ибо контент уже на странице.



Собственно, слайдер внутри этого попапа не работает полноценно, пока не изменишь размер страницы, можно просто свернуть развернуть окно. Я не понимаю, откуда этот баг. Скорей всего дело в связке swiper - magnific popup, но в чем конкретно проблема, ума не приложу.

Answer 1

[Владислав]

Большинство таких плагинов не умеют инициализировать слайдер внутри элемента с display: none т.к. у таких слайдеров нет размеров. После открытия попап окна нужно ре-инициализировать слайдер.
На изменения размера окна скорее всего стоит слушатель внутри плагина слайдера который и реинитит его, поэтому после ресайза все работает нормально.

Answer 2

[Александр Морж]

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

$('.popup-btn').magnificPopup({
	type: 'inline',
	preloader: false,
	callbacks: {
		open: function() {
			//вот тут добавить инициализацию слайдера
		}
	}
});