Почему не работает кнопка «Далее» в Swiper Js? ⇐ Javascript

[Anonymous]

Привет, ребята, у меня есть этот код, который проходит через объект продуктов для автоматического создания карточек продуктов вместо добавления HTML вручную, он также создает структуру салфетки, проблема в том, что когда я нажимаю кнопку «Далее» на свайпе, он этого не делает. Подсказка не отображается, но предыдущая кнопка работает хорошо, могу ли я узнать почему
import { products } from "./data/products.js";

function generateProductCards() {
const productsContainer = document.querySelector(".products-container");

// Create the Swiper structure
let productsContainerHTML = `


`;

// Loop through products to create slides
products.forEach((product) => {
const firstModel = product.models[0];
productsContainerHTML += `



${product.name}
${product.price} DA
BUY NOW


`;
});

// Close the Swiper structure
productsContainerHTML += `



`;

// Set the HTML content
productsContainer.innerHTML = productsContainerHTML;

}

generateProductCards();

function initializeSwiper(){
new Swiper('.swiper', {
effect: 'slide',
slidesPerView: 4,
spaceBetween: 10, // Add spacing between slides
loop: true, // Enable looping
grabCursor: true, // Add grab cursor for better UX
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
}

document.addEventListener('DOMContentLoaded',initializeSwiper());


Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working