javascript - 在 django 模板中的 js 的 Swiper 功能中创建了重复的元素（产品）

Question

我正在尝试展示一些产品的 Django 模板。我尝试过Swiper js 类在 div 中显示这些产品。在这些产品中有两个按钮“prev”和“next”用于水平滚动。

在我的产品模型中，我从管理员那里插入了一个产品，并查看它在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 */

任何帮助将不胜感激。提前致谢！

Answer 1

这是下面的 php 代码：但也许你会明白.. <div class="swiper-slide" data-hash="slide<?php echo $foorloop->current_post_index; ?>" >

这data-hash="slide<?php echo $objTestos->current_post; ?>"一切都在产生 data-hash="slide1"，data-hash="slide2"等等。

在js中

   var swiper = new Swiper('.swiper-container', {
    hashNavigation: {
        watchState: true,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});