Magnific popup + Слайдер внутри. Как сделать?

Question

[alekamisleforma]

То, что есть сейчас:

<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a>

	<div id="test-popup" class="white-popup mfp-hide">
  <!-- Слайдер НАЧАЛО -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/img5.jpg" alt=""></div>
				<div class="swiper-slide"><img src="img/img4.jpg" alt=""></div>
				<div class="swiper-slide"><img src="img/img3.jpg" alt=""></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
			<!-- Add Arrows -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
		</div>
		<!-- Слайдер КОНЕЦ -->
</div>

Как подключены скрипты:

<script src="js/jquery-3.3.1.min.js"></script>
		<script src="lib/mpopup/jquery.magnific-popup.js"></script>
    <script src="lib/slider/swiper.min.js"></script>
    <script>
     var swiper = new Swiper('.swiper-container', {
						spaceBetween: 0,
						centeredSlides: true,
						autoplay: {
							delay: 400,
							disableOnInteraction: false,
						},
						pagination: {
							el: '.swiper-pagination',
							clickable: true,
						},
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					});
    </script>
    <script type="text/javascript">
     $('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
    </script>

При клике должно выводиться всплывающее окно (реализовано при помощи magnific popup), внутри которого будет размещен слайдер (использую Swiper). Но проблема заключается в том, что во всплывающем окне слайдер отображается, но не функционирует. Автоплей не работает, переключение слайдов вручную также недоступно. Если же в браузере Chrome по странице нажать правой кнопкой мыши и затем "Посмотреть код", то в этом случае слайдер становится активным. Проблема, как я понял, заключается в том, что для всплывающего окна не активен этот код слайдера:

var swiper = new Swiper('.swiper-container', {
						spaceBetween: 0,
						centeredSlides: true,
						autoplay: {
							delay: 400,
							disableOnInteraction: false,
						},
						pagination: {
							el: '.swiper-pagination',
							clickable: true,
						},
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
					});

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

Answer 1

[Andrew]

Запускайте слайдер, когда открывается всплывашка

$('.open-popup-link').magnificPopup({
     
  type:'inline',
  midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
$('.open-popup-link').click(function(){
var swiper = new Swiper('.swiper-container', {
            spaceBetween: 0,
            centeredSlides: true,
            autoplay: {
              delay: 400,
              disableOnInteraction: false,
            },
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          });
});

Вот так попробуйте.

Comments

[alekamisleforma]

Вы волшебник!)) Огромное спасибо! Все работает так, как и должно!

[Andrew]

alekamisleforma, Суть в том, что вы пытаетесь запустить слайдер, на элементе, которого еще нет, он появляется после клика( в данном случае)