javascript - djangoテンプレートのjsのSwiper関数で重複要素(製品)を作成しています

Question

いくつかの製品 Django テンプレートを表示しようとしています。Swiper js クラスを試して、これらの製品を div に表示しました。これらの製品には、横方向にスクロールするための「前へ」と「次へ」の 2 つのボタンがあります。

私の製品モデルには、管理者から挿入した製品が 1 つあり、Swiper div にどのように表示されるかを確認します。しかし、「前へ」または「次へ」をクリックしようとするか、「カーソル」でつかもうとすると、その要素の複製が表示されます

このリンクからアイデアを得ました。

私の製品が Swiper div に表示されている画像:

Django テンプレートの HTML コード:

<!-- 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">৳&lt;/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 */

どんな助けでも大歓迎です。前もって感謝します！