Дубликаты элементов (товаров) создаются в Swiper функцией js в шаблоне django - PullRequest
Новая
       57

Дубликаты элементов (товаров) создаются в Swiper функцией js в шаблоне django

0 голосов
/ 08 мая 2020

Я пытаюсь показать некоторые товары Django шаблон. Я пробовал класс Swiper js, чтобы показать эти продукты в div. Для горизонтальной прокрутки в этих продуктах используются две кнопки: «предыдущий» и «следующий».

В моей модели продукта есть один продукт, который я вставил из администратора и собираюсь посмотреть, как он отображается в Swiper div. Но он показывает дубликаты этого одного элемента всякий раз, когда я пытаюсь щелкнуть «предыдущий» или «следующий» или захватить с помощью «курсора»

Я получил идею из этой ссылки.

Изображение, на котором мой продукт показан в разделе Swiper:

enter image description here

HTML КОД в шаблоне Django: 

<!-- products  -->
<div class="container my-4 bg-white border border-light-dark flex">

<div class="lunchbox">

  <!-- slider main container -->
  <div id="swiper1" class="swiper-container"> 

      <!-- additional required wrapper -->
      <div class="swiper-wrapper">

          <!-- slides -->
          {% for product in products %}
              <div class="swiper-slide">
                <div class="product">
                  <img class="photograph" src="/media/product_images/{{product.product_code}}.jpg" alt="">
                  <h2 class="product__name">{{product.name}}</h2>
                  <p class="product__description"><span class="font-weight-normal">৳</span>{{product.product_price}}</p>
                </div>
              </div>
          {% endfor %}

      </div>

      <!-- pagination -->
      <div class="swiper-pagination"></div>

  </div>

  <!-- navigation buttons -->
  <div id="js-prev1" class="swiper-button-prev btn-edit" style="top:35%;"></div>
  <div id="js-next1" class="swiper-button-next btn-edit" style="top:35%;"></div>

</div>
</div>

JavaScript КОД: 

(function() {

  'use strict';

  const mySwiper = new Swiper ('#swiper1', {

    loop: true, 

    slidesPerView: 'auto',
    centeredSlides: true,

    a11y: true,
    keyboardControl: true,
    grabCursor: true,

    // pagination
    pagination: '.swiper-pagination',
    paginationClickable: true,

    // navigation arrows
    navigation: {
        nextEl: '.swiper-button-prev',
        prevEl: '.swiper-button-next',
      },
    observer: true,
    observeParents: true,

  });

})(); /* IIFE end */

Любая помощь будет очень признательна. Заранее спасибо!

...