title: Duplicate elements (products) is creating in Swiper function of js in django template
body: <p>I am trying to show some products Django template. I have tried <a href="https://swiperjs.com/api/" rel="nofollow noreferrer">Swiper</a> js class to show those products in a div. There are two buttons "prev" and "next" used to scroll horizontally in those products.</p>
  
  <p>In my Product model, there is one product i have inserted from admin and going to see how its shown in the <a href="https://codepen.io/aaronkahlhamer/full/oeVQxQ" rel="nofollow noreferrer">Swiper</a> div. But its showing duplicates of that one element whenever i am trying to click "prev" or "next" or grabbing by "Cursor"</p>
  
  <p>I got idea from <a href="https://codepen.io/aaronkahlhamer/pen/oeVQxQ" rel="nofollow noreferrer">this</a> link.</p>
  
  <h1>Picture in which my product is shown in the Swiper div:</h1>
  
  <p><a href="https://i.stack.imgur.com/Ohj42.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ohj42.png" alt="enter image description here"></a></p>
  
  <h1>HTML CODE in Django template:</h1>
  
  <pre><code>&lt;!-- products  --&gt;
  &lt;div class="container my-4 bg-white border border-light-dark flex"&gt;
  
  &lt;div class="lunchbox"&gt;
  
    &lt;!-- slider main container --&gt;
    &lt;div id="swiper1" class="swiper-container"&gt; 
  
        &lt;!-- additional required wrapper --&gt;
        &lt;div class="swiper-wrapper"&gt;
  
            &lt;!-- slides --&gt;
            {% for product in products %}
                &lt;div class="swiper-slide"&gt;
                  &lt;div class="product"&gt;
                    &lt;img class="photograph" src="/media/product_images/{{product.product_code}}.jpg" alt=""&gt;
                    &lt;h2 class="product__name"&gt;{{product.name}}&lt;/h2&gt;
                    &lt;p class="product__description"&gt;&lt;span class="font-weight-normal"&gt;৳&lt;/span&gt;{{product.product_price}}&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            {% endfor %}
  
        &lt;/div&gt;
  
        &lt;!-- pagination --&gt;
        &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;!-- navigation buttons --&gt;
    &lt;div id="js-prev1" class="swiper-button-prev btn-edit" style="top:35%;"&gt;&lt;/div&gt;
    &lt;div id="js-next1" class="swiper-button-next btn-edit" style="top:35%;"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>JavaScript CODE:</h1>
  
  <pre><code>(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 */
  </code></pre>
  
  <p>Any help would be much appreciation.
  Thanks in Advance!</p>