So,I am trying to show images in slider in my small blog. In my index page I am looping through all my blogs. And If I have images, I am looping through images in Swiper js slider. I think I have done everything appropriately. But no image or slider is showing in the screen. No error in the console.
Here is my models
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)
Here is my template
{% 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>
Here, I guess, I am using a cheap trick. To create multiple slider in Js,I am using django template tags.
I had two problems
I needed different class names for pagination, lazy-loading for every swiper slides
So I made this edit in template
{% 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 %}
and Script
<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>
Second, I had to remove all the styles in class .swiper-slide img.
Now it workes, slids shows. But removing the styles, also moves the pagination dots under the images. I can't place the dots on the images.