React中Swiper.js集成问题：向前滑动出现无限空白Slide

核心问题分析 #

你遇到的向前滑无限空白、向后正常的问题，主要源于两个关键问题：

• 重复的swiper-slide类名：你在SwiperSlide内部的bestseller-card div上额外添加了swiper-slide类，这会让Swiper误将内层div识别为独立slide，直接打乱循环逻辑的计算。
• Loop模式的初始化与数据匹配问题：Swiper开启loop时，需要至少slidesPerView * 2个slide才能正常生成循环用的复制slide；如果组件初始化时bestsellerProducts是空数组，swiper先基于空数据完成初始化，后续数据加载后未触发swiper重新计算，就会引发循环异常。

具体修复步骤 #

1. 移除重复的swiper-slide类名 #

SwiperSlide组件本身会自动生成带swiper-slide类的元素，不需要手动给内层div添加该类，直接删除即可：

// 原代码
<div className="bestseller-card swiper-slide">
// 修改后
<div className="bestseller-card">

2. 开启Swiper的DOM变化监听 #

给Swiper组件添加observer和observeParents配置，确保数据加载完成后swiper能自动重新初始化，适配新的slide数量：

<Swiper
    modules={[Navigation, Pagination, Scrollbar, A11y]}
    spaceBetween={30}
    slidesPerView={3}
    slidesPerGroup={3}
    navigation
    pagination={{ clickable: true }}
    loop={true}
    observer={true} // 监听slide DOM变化
    observeParents={true} // 监听父容器DOM变化
>

3. 可选：动态控制Loop模式（避免slide数量不足时补空白） #

如果接口返回的slide数量少于slidesPerView * 2，Loop模式会自动补空白slide，你可以根据数据长度动态关闭Loop：

loop={bestsellerProducts.length >= 6}

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
import { NavLink } from "react-router-dom";
import api from "../../hook/api";
import "../css/bestseller.css";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

function Bestseller() {
    const [bestsellerProducts, setBestsellerProducts] = useState([]);
    useEffect(() => {
        async function getBestsellerProducts() {
            try {
                const response = await api.get('/api/bestseller');
                setBestsellerProducts(response.data);
            } catch (error) {
                console.error("Error to fetch products: ", error);
            }
        }
        getBestsellerProducts();
    }, []);

    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
                    modules={[Navigation, Pagination, Scrollbar, A11y]}
                    spaceBetween={30}
                    slidesPerView={3}
                    slidesPerGroup={3}
                    navigation
                    pagination={{ clickable: true }}
                    loop={bestsellerProducts.length >= 6}
                    observer={true}
                    observeParents={true}
                >
                    {bestsellerProducts.map((product) => (
                        <SwiperSlide key={product.id}>
                            <NavLink to={`/product/${product.name}/${product.item_id}`} state={{ item_id: product.item_id, name: product.name, img1: product.img1, img2: product.img2, img3: product.img3, img4: product.img4, img5: product.img5, price: product.price, brand: product.brand, description: product.description, information: product.information }} className="bestseller-card-link">
                                <div className="bestseller-card">
                                    <div className="bestseller-card-img">
                                        <img src={product.img1} alt={product.name} />
                                    </div>
                                    <div className="bestseller-card-data">
                                        <h2>{product.name /* 20px weight: 600 */}</h2>
                                        <p>€ {product.price.toFixed(2) /* 18px weight: 600 */}</p>
                                    </div>
                                </div>
                            </NavLink>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </div>
    );
}

export default Bestseller;

内容的提问来源于stack exchange，提问作者marco.bonaaa