Entonces, estoy tratando de mostrar imágenes en el control deslizante en mi pequeño blog. En mi página de índice estoy recorriendo todos mis blogs. Y si tengo imágenes, estoy recorriendo imágenes en el control deslizante Swiper js. Creo que he hecho todo correctamente. Pero no se muestra ninguna imagen o control deslizante en la pantalla. No hay error en la consola.
Aquí están mis modelos
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)Aquí está mi plantilla
{% 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>Aquí, supongo, estoy usando un truco barato. Para crear múltiples controles deslizantes en Js, estoy usando etiquetas de plantilla de django.
tuve dos problemas
Necesitaba diferentes nombres de clase para paginación, carga diferida para cada diapositiva de swiper
Así que hice esta edición en la plantilla.
{% 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 %}y Guión
<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> En segundo lugar, tuve que eliminar todos los estilos en la clase .swiper-slide img .
Ahora funciona, presentaciones de diapositivas. Pero al eliminar los estilos, también se mueven los puntos de paginación debajo de las imágenes. No puedo colocar los puntos en las imágenes.