Next.js中Swiper.js用map渲染滑块后失效问题求助

问题 #

使用Swiper.js时，手动静态渲染滑块功能正常，但通过map函数批量渲染滑块后，移动端和桌面端的滑块都失去滑动响应，且滑块会超出屏幕总宽度。

当前代码如下：

import { Swiper, SwiperSlide } from "swiper/react";
import Districts from "@/app/create/components/Districts";
import "swiper/css";
import Link from "next/link";

const DistrictSwiper = () => {
    return (
        <Swiper
            spaceBetween={50}
            slidesPerView={3}
            onSlideChange={() => console.log("slide change")}
            onSwiper={(swiper) => console.log(swiper)}
        >
            {Districts.map((item, index) => (
                <SwiperSlide
                    key={index}
                    style={{ width: "auto", display: "inline-block" }}
                    className="p-1 swiper-slide"
                >
                    <Link
                        className="px-3 py-1 text-xs border rounded-full hover:bg-slate-100"
                        href=""
                    >
                        {item.name}
                    </Link>
                </SwiperSlide>
            ))}
        </Swiper>
    );
};

export default DistrictSwiper;

问题表现：

• 移动端：滑块超出屏幕宽度，无法滑动
• 桌面端：滑块布局混乱，滑动功能失效

解决方案 #

1. 移除干扰Swiper布局的自定义样式 #

你给SwiperSlide添加的width: auto和display: inline-block会破坏Swiper自带的布局计算逻辑，Swiper需要自主控制滑块的宽度和排列方式，直接删掉这两个样式：

<SwiperSlide
    key={index}
    className="p-1 swiper-slide"
>

2. 添加响应式配置适配不同屏幕 #

固定的slidesPerView={3}在移动端会导致滑块挤在一起或超出屏幕，通过breakpoints设置不同屏幕尺寸下的显示数量：

<Swiper
    spaceBetween={16} // 缩小间距，适配移动端
    slidesPerView="auto" // 自动适配，也可设为具体数值
    breakpoints={{
        640: { slidesPerView: 2 },
        768: { slidesPerView: 3 },
        1024: { slidesPerView: 4 },
    }}
    onSlideChange={() => console.log("slide change")}
    onSwiper={(swiper) => console.log(swiper)}
>

3. 标记为客户端组件（Next.js 13+） #

Swiper是依赖客户端交互的组件，在Next.js的App Router中，需要添加"use client"指令确保组件在客户端渲染，避免初始化异常：

"use client"; // 加在文件最顶部
import { Swiper, SwiperSlide } from "swiper/react";
// ...其他导入

4. 优化key值（可选） #

尽量避免用index作为key，优先使用数据中唯一的标识（比如item.id），避免列表更新时可能出现的渲染异常：

<SwiperSlide key={item.id} ...>

修改后的完整代码 #

"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import Districts from "@/app/create/components/Districts";
import "swiper/css";
import Link from "next/link";

const DistrictSwiper = () => {
    return (
        <Swiper
            spaceBetween={16}
            slidesPerView="auto"
            breakpoints={{
                640: { slidesPerView: 2 },
                768: { slidesPerView: 3 },
                1024: { slidesPerView: 4 },
            }}
            onSlideChange={() => console.log("slide change")}
            onSwiper={(swiper) => console.log(swiper)}
        >
            {Districts.map((item) => (
                <SwiperSlide
                    key={item.id || index} // 有唯一id用id，无则保留index
                    className="p-1"
                >
                    <Link
                        className="px-3 py-1 text-xs border rounded-full hover:bg-slate-100"
                        href=""
                    >
                        {item.name}
                    </Link>
                </SwiperSlide>
            ))}
        </Swiper>
    );
};

export default DistrictSwiper;

内容的提问来源于stack exchange，提问作者Jashandeep Singh