Question

我有以下问题：我正在为每个帖子创建一个带有可选图像画廊的博客。单击预览图片后，画廊会以模态形式打开，然后最多可以显示4张图片作为滑动图库。

问题在于，只有打开的第一个模式会显示带有所有js的图库。当我打开下一张图片时，可以拖动图片，但是滑块无法正常工作。但是，当我调整浏览器窗口的大小时，它开始正常工作。以下所有打开的画廊都一样。

我做了很多实验，无论有没有HTML类，都可以将脚本放入循环内外。在这一点上，我猜测它与jQuery .on（）方法中的“ shown.bs.modal”仅加载一次有关。但是我不知道该如何解决。

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,
      },
    });
  });
});

Swiper.js在Django模板中无法与多个Bootstrap4模态一起正常使用

0 个答案: