Слайды SwiperJs не отображаются в шаблоне Django

Итак, я пытаюсь показать изображения в слайдере в своем небольшом блоге. На моей индексной странице я перебираю все мои блоги. И если у меня есть изображения, я перебираю их в слайдере 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.

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