Experimenting with displaying products in a Django template, I decided to utilize the Swiper js class. This allowed me to showcase the products within a div, complete with navigation buttons for scrolling horizontally.
However, when testing this setup with one product inserted into my Product model from the admin panel, I encountered an issue. Every time I attempted to navigate using the "prev" or "next" buttons, or even clicked with the cursor, duplicates of the single element appeared.
Inspiration for this implementation came from the following link: here.
Check out the image below showcasing my product in the Swiper div:
https://i.sstatic.net/Ohj42.png
Here is the HTML CODE snippet from the Django template:
<!-- 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>
And here is the JavaScript CODE snippet:
(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,
});
})(); /* Immediately Invoked Function Expression (IIFE) - End */
Any assistance on resolving this issue would be greatly appreciated.