Как вставить Swiper в модальном окне?

Question

[Денис Гуров]

Ребята, подскажите как вставить swiper slider в модальное окно. У меня уже отображается Swiper slider на странице, а как его в модальное окно засунуть??
Вот код Swiper:

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img
          src="//li1.cdbcdn.com/oh/7b256133-cc05-4dad-aba6-8ef144a9a55f.jpg?f=32&w=910&h=450&mode=crop"
          alt=""></div>
      <div class="swiper-slide"><img
          src="//li1.cdbcdn.com/oh/7b256133-cc05-4dad-aba6-8ef144a9a55f.jpg?f=32&w=910&h=450&mode=crop"
          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>

Вот на JS я его инициализирую:

var swiper;
    //plugin Swiper slider
    function initSwiper() {
      swiper = new Swiper('.swiper-container', {
        autoplay: {
          delay: 4000
        },
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      });
    }

А как сделать так, что бы и в модальном окне он тоже был и крутился?

Comments

[Lord_Dantes]

Ну берете крч и вставляете в код модального окна и все.

[Денис Гуров]

slave bb, Что берете и что вставляете? Я уже что только не вставлял в код модального окна.

[Lord_Dantes]

Денис Гуров,

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img
          src="//li1.cdbcdn.com/oh/7b256133-cc05-4dad-aba6-8ef144a9a55f.jpg?f=32&w=910&h=450&mode=crop"
          alt=""></div>
      <div class="swiper-slide"><img
          src="//li1.cdbcdn.com/oh/7b256133-cc05-4dad-aba6-8ef144a9a55f.jpg?f=32&w=910&h=450&mode=crop"
          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>

Вставляете между открывающим и закрывающим тегом вашего модального окна.

[Денис Гуров]

slave bb, Да делал я так как вы говорите. У меня хрень получается.

[Модератор]

Денис Гуров дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Сергей delphinpro]

Денис Гуров, Хрень получается потому, что слайдер нужно инициализировать после открытия окна.
Чтобы слайдеру рассчитать размеры свои и своих слайдов, нужно чтобы у слайдов были эти самые размеры. А скрытые (display:none) блоки размеров не имеют.

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

[Lord_Dantes]

Сергей delphinpro, или при функции открытии модалки вызывать активацию слайдера?

[Сергей delphinpro]

slave bb, нужен момент гарантированной видимости.
В принципе может прокатить
showModal();
initSlider();
а может и нет.

[Денис Гуров]

Сергей delphinpro, У меня magnific popup и Swiper slider. Я в этом деле навичек просто.

[Сергей delphinpro]

Денис Гуров,

$('.image-link').magnificPopup({
  // ...
  callbacks: {
    open: function() {
       // Здесь вызов свайпера
    },
  }
});

[Денис Гуров]

Сергей delphinpro, Сережа, сейчас попробую

[Денис Гуров]

Сергей delphinpro, Наверное я туповат (( Я нашел эту функцию в документации. Но как мой свайпер туда засунуть не пойму

Answer 1

[Виталий]

Как-то так