To fix the issue with your Swiper integration, let’s ensure we are setting up Swiper correctly and handling the state and rendering of products properly. Here’s a revised version of your Bestseller component with some adjustments:

Changes and Explanations:

1. SwiperCore Setup: Moved the SwiperCore.use call to the top, ensuring that Swiper modules (Navigation, Pagination, Scrollbar, A11y) are properly set up before the component renders.

2. Fetch Data Effect: Used an async function within useEffect to fetch bestsellerProducts from your API. This ensures that the data is fetched after the component mounts and updates bestsellerProducts state accordingly.

3. Swiper Component: Configured Swiper with necessary props:

   • spaceBetween: Adds space between slides.
   • slidesPerView={3}: Displays 3 slides at a time.
   • navigation: Enables navigation buttons.
   • pagination={{ clickable: true }}: Adds clickable pagination bullets.
   • loop={true}: Enables infinite loop mode.

4. SwiperSlide Component: Used product.item_id as the key for SwiperSlide to ensure each slide is uniquely identified.

5. NavLink: Wrapped each slide content in NavLink for navigation to individual product pages. Adjusted the to prop to correctly link to each product’s details page.

import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

import { NavLink } from "react-router-dom";
import api from "../../hook/api";

import "../css/bestseller.css";

// Install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

function Bestseller() {
  const [bestsellerProducts, setBestsellerProducts] = useState([]);

  useEffect(() => {
    async function fetchBestsellerProducts() {
      try {
        const response = await api.get("/api/bestseller");
        setBestsellerProducts(response.data);
      } catch (error) {
        console.error("Error fetching products: ", error);
      }
    }
    fetchBestsellerProducts();
  }, []);

  return (
    <div className="bestseller-container">
      <div className="bestseller-title">
        <h2>Prodotti più venduti</h2>
        <p>Scopri i prodotti più popolari tra i nostri clienti</p>
      </div>
      <div className="bestseller-card-container">
        <Swiper
          spaceBetween={30}
          slidesPerView={3}
          navigation
          pagination={{ clickable: true }}
          loop={true}
        >
          {bestsellerProducts.map((product) => (
            <SwiperSlide key={product.item_id}>
              <NavLink
                to={`/product/${product.name}/${product.item_id}`}
                className="bestseller-card-link"
              >
                <div className="bestseller-card swiper-slide">
                  <div className="bestseller-card-img">
                    <img src={product.img1} alt={product.name} />
                  </div>
                  <div className="bestseller-card-data">
                    <h2>{product.name}</h2>
                    <p>€ {product.price.toFixed(2)}</p>
                  </div>
                </div>
              </NavLink>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
}

export default Bestseller;