@alekamisleforma

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

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

<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 нулевые и сам я не понимаю как это сделать.
  • Вопрос задан
  • 1712 просмотров
Решения вопроса 1
KickeRocK
@KickeRocK
FrontFinish
Запускайте слайдер, когда открывается всплывашка
$('.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',
            },
          });
});

Вот так попробуйте.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы