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

Question

所以，我正在尝试在我的小博客中显示滑块中的图像。在我的索引页面中，我循环浏览我所有的博客。如果我有图片，我会在 Swiper js 滑块中循环浏览图片。我认为我所做的一切都是恰当的。但是屏幕上没有显示图像或滑块。控制台没有错误。

这是我的模型

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

我有两个问题

我需要不同的 class 分页名称，lazy-loading 每个滑动器幻灯片

所以我在模板中做了这个编辑

{% 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>

其次，我不得不删除 class .swiper-slide img 中的所有样式。

现在可以用了，幻灯片显示。但是删除样式，也会移动图像下方的分页点。我无法在图像上放置点。

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

SwiperJs slides not showing on Django template

javascript

django

django-templates

swiperjs