SwiperJs幻灯片在Django模板上不显示

Question

所以，我试图在滑块在我的小博客显示图像。在我的索引页，我正在循环浏览我所有的博客。如果我有图像，我会在Swiper js slider中循环图像。我想我做的每件事都很得体。但是屏幕上没有显示图像或滑块。控制台没有错误。

这是我的模型

class Blog(models.Model):
title = models.CharField(max_length=200, null=True, blank=True)
body = models.TextField(null=True, blank=True)
created = models.DateTimeField()


class ImageUrl(models.Model):
blog = models.ForeignKey(Blog, related_name="image_urls", on_delete=models.CASCADE)
url = models.URLField(max_length=1000)

这是我的模板

{% for blog in page_obj %}
<div class="mx-3 block content">
{% if not blog.image_urls.count == 0 %}
<div class="swiper mySwiper{{blog.id}}">
<div class="swiper-wrapper">
{% for image in blog.image_urls.all %}
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img data-src="{{image.url}}" class="swiper-lazy" />
</div>
<div class="swiper-lazy-preloader"></div>
</div>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
{% endif %}
</div>
{% endfor %}

Css

.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #000;
}
.swiper-slide img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}

<script>
{% for blog in page_obj %}
{% if not blog.image_urls.count == 0 %}
var swiper{{blog.id}} = new Swiper(".mySwiper{{blog.id}}", {
loop: true,
pagination: {
el: ".swiper-pagination",
},
preloadImages: false,
lazy: true,
});
{% endif %}
{% endfor %}
</script>

在这里，我想，我在使用一个廉价的技巧。为了在Js中创建多个滑块，我使用django模板标签。

Answer 1

我有两个问题

我需要不同的类名来分页，延迟加载每个滑动幻灯片

我在模板

中做了这个编辑

{% for blog in page_obj %}
<div class="mx-3 block content">
{% if not blog.image_urls.count == 0 %}
<div class="swiper mySwiper mySwiper{{blog.id}}">
<div class="swiper-wrapper">
{% for image in blog.image_urls.all %}
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img data-src="{{image.url}}" class="swiper-lazy{{blog.pk}}" />
</div>
<div class="swiper-lazy-preloader{{blog.pk}}"></div>
</div>
{% endfor %}
</div>
<div class="swiper-pagination{{blog.pk}} is-centered"></div>
</div>
{% endif %}
</div>
{% endfor %}

脚本和

<script>
{% for blog in page_obj %}
{% if not blog.image_urls.count == 0 %}
var swiper{{blog.id}} = new Swiper(".mySwiper{{blog.id}}", {
autoHeight: true,
loop: true,
zoom: true,
pagination: {
el: ".swiper-pagination{{blog.pk}}",
clickable: true
},
preloadImages: false,
lazy: {
enabled: true,
elementClass: "swiper-lazy{{blog.pk}}",
preloaderClass: "swiper-lazy-preloader{{blog.pk}}",
loadPrevNext: true,
loadPrevNextAmount: {{blog.image_urls.count}},
},
});
{% endif %}
{% endfor %}
</script>

第二，我必须删除类.swiper-slide img中的所有样式。

现在它工作了，幻灯片显示。但是移除样式，也会移动图片下面的分页点。我无法在图像上放置点。