React中Swiper组件fade效果失效，导航按钮异常求助

问题根源 #

核心问题是每次组件渲染时，幻灯片的背景图都会重新随机生成，导致SwiperSlide的style属性频繁变化。Swiper在loop模式下依赖稳定的DOM结构和状态跟踪幻灯片位置，这种随机变化会打乱Swiper内部状态，引发导航按钮失效、无过渡效果的问题。

修复步骤 #

1. 提前缓存每个幻灯片的随机背景索引，避免每次渲染重新生成
2. 确保SwiperSlide的样式属性稳定，不再随渲染周期变化

修改后的代码 #

import React, { useMemo } from 'react';
import SwiperImagesStack from './media/swiper-images/SwiperImagesIndex';
import SwiperTexts from './SlideTexts';
import './css/MainSwiper.css';
import { Navigation, Pagination, EffectFade, Autoplay, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default function MainSwiper() {
  const CaseFotos = [19, 2, 3, 3, 5, 8, 8, 2, 1, 2, 4, 5, 4, 7, 18, 4, 5, 3, 6, 4, 3, 5];

  // 用useMemo缓存每个slide的随机背景索引，仅在CaseFotos变化时重新生成
  const slideBgIndexes = useMemo(() => {
    return CaseFotos.map(n => Math.floor(Math.random() * (n - 1)));
  }, [CaseFotos]);

  const mybg = (m, index) => {
    if (index === 0) {
      if ([10, 13].includes(m)) {
        return {
          backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
          justifyContent: 'flex-end',
          alignItems: 'flex-end'
        };
      } else if ([1, 4, 6, 11, 12, 15, 17, 18].includes(m)) {
        return {
          backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
          justifyContent: 'flex-start',
          alignItems: 'flex-end'
        };
      } else if (m === 16) {
        return {
          backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
          justifyContent: 'flex-end',
          alignItems: 'flex-start'
        };
      } else {
        return { backgroundImage: `url('${SwiperImagesStack[index][m]}')` };
      }
    } else {
      return {
        backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
        color: 'white'
      };
    }
  };

  return (
    <Swiper
      spaceBetween={30}
      slidesPerView={1}
      navigation={true}
      effect={"fade"}
      speed={1500}
      autoplay={{ delay: 5500 }}
      pagination={{
        clickable: true,
      }}
      loop={true}
      modules={[Navigation, Pagination, Autoplay, A11y, EffectFade]}
      className="MainSwiper"
    >
      {CaseFotos.map((n, index) => (
        <SwiperSlide
          className='SwiperSlide'
          key={`slide${index}`}
          id={`case${index}`}
          style={mybg(slideBgIndexes[index], index)}
        >
          <div className='categoryWrapper'>
            <h2 className="case-text">
              <strong> {`${SwiperTexts[index]}`} </strong>
              <button>
                <span>
                  <span>
                    <span data-attr-span="See how">
                      See how
                    </span>
                  </span>
                </span>
              </button>
            </h2>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

关键说明 #

• 用useMemo缓存slideBgIndexes，确保随机索引仅在组件初始化或CaseFotos变化时生成一次，避免每次渲染都重新随机
• 每个SwiperSlide的style属性现在依赖稳定的缓存值，不再随渲染周期变化，Swiper可以正常维护内部状态，导航按钮和fade效果就能正常工作

内容的提问来源于stack exchange，提问作者Mitya Vasyukov