Swiper.js не работает правильно с несколькими модалами Bootstrap4 в шаблоне Django - PullRequest
Новая
       15

Swiper.js не работает правильно с несколькими модалами Bootstrap4 в шаблоне Django

0 голосов
/ 08 июня 2019

У меня следующая проблема: я создаю блог с дополнительной галереей изображений для каждого поста.Галерея открывается в модальном режиме после того, как вы щелкнете по изображению предварительного просмотра, а затем до 4 изображений отображаются в виде swiper-галереи.

Проблема в том, что только первый открытый модал отображает галерею со всеми js, примененными к ней.Когда я открываю следующий, я могу перетащить картинки, но слайдер работает неправильно.Однако, когда я изменяю размер окна браузера, оно начинает работать правильно.То же самое относится к каждой следующей галерее, которая открывается.

Я много экспериментировал, помещая скрипт внутри и снаружи цикла с различными классами HTML или без них.На данный момент, я предполагаю, что это как-то связано с 'show.bs.modal' в методе jQuery .on (), который загружается только один раз.Но я не знаю, как это исправить.

HTML: 

{% for post in posts %}
<!--preview picture-->
<img src="{{ post.image_0.url }}" class="blog-pic" data-toggle="modal" data-target="#{{ post.slug }}">
<!--modal-->
<div class="modal fade" id="{{ post.slug }}">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ post.title }}</h4>
           <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="swiper-container {{ post.slug }}">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="{{ post.image_0.url }}" id="swipe-img"></div>
            <div class="swiper-slide"><img src="{{ post.image_1.url }}" id="swipe-img"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endfor %}

JS / JQuery: 

<!--currently positioned within the for loop-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">

<script>
$(function(){
$('body').on('shown.bs.modal', function() {
    var swiper{{ post.id }} = new Swiper('.{{ post.slug }}', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 1000,
        modifier: 1,
        slideShadows: false,
      },
    });
  });
});

...