React中Swiper.js断点配置引发滑块异常问题求助

首页的两个Swiper.js滑块在未配置响应式断点时运行正常，添加断点配置后出现以下异常：

• 第一个滑块从992px断点切换到1168px断点后，滑动几次会出现空白幻灯片；
• 第二个滑块点击窗口最大化按钮，从任意断点切换到992px断点时，未显示预期数量的幻灯片，仅出现一张尺寸异常偏大的幻灯片。

已尝试调整断点参数、修改CSS类，但问题未解决，相关代码如下：

滑块组件代码 #

import React, { useState } from "react";
import { Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { Thumbs } from "swiper";

import CrossBike from "../../assets/images/Cross-Bike.jpg";
import CityBike from "../../assets/images/City-Bike.jpg";
import MountainBike from "../../assets/images/Mountain-bike.jpg";
import RoadBike from "../../assets/images/Road-bike.jpg";

import "./Carousel.css";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

function Carousel(props) {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <div>
      <Swiper
        style={props.style}
        className={props.class}
        // install Swiper modules
        modules={[Thumbs, Navigation]}
        thumbs={{
          swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
        }}
        loop={true}
        // Responsive breakpoints

        breakpoints={props.responsive && props.breakpoints}
        spaceBetween={props.space}
        slidesPerView={props.spv}
        navigation
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log("slide change")}
      >
        {props.children}
      </Swiper>

      {props.thumb ? (
        <Swiper
          modules={[Thumbs]}
          watchSlidesProgress
          onSwiper={setThumbsSwiper}
          slidesPerView={4}
          spaceBetween={20}
          height={100}
          className="thumbs"
        >
          <SwiperSlide>
            <img className="Image" src={CrossBike} />
          </SwiperSlide>
          <SwiperSlide>
            <img className="Image" src={CityBike} />
          </SwiperSlide>
          <SwiperSlide>
            <img className="Image" src={MountainBike} />
          </SwiperSlide>
          <SwiperSlide>
            <img className="Image" src={RoadBike} />
          </SwiperSlide>
        </Swiper>
      ) : null}
    </div>
  );
}

export default Carousel;

第一个滑块代码 #

<Carousel
            class="big-card-carousel"
            responsive
            breakpoints={{
              // when window width is >= 480px
              480: {
                slidesPerView: 1,
                //spaceBetween: 40,
              },
              // when window width is >= 640px
              768: {
                slidesPerView: 3,
                //spaceBetween: 100,
              },
              992: {
                slidesPerView: 4,
                // spaceBetween: 40,
              },
              1168: {
                slidesPerView: 1,
                // spaceBetween: 40,
              },
            }}
          >
            <SwiperSlide>
              <div className="big-card-wrapper">
                <ProductCart
                  image={img}
                  class="big-card"
                  price=" €39.99"
                  title=" Endura Hummvee Cycling Trousers II"
                />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="big-card-wrapper">
                <ProductCart
                  image={img}
                  class="big-card"
                  price=" €39.99"
                  title=" Endura Hummvee Cycling Trousers II"
                />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="big-card-wrapper">
                <ProductCart
                  image={img}
                  class="big-card"
                  price=" €39.99"
                  title=" Endura Hummvee Cycling Trousers II"
                />
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="big-card-wrapper">
                <ProductCart
                  image={img}
                  class="big-card"
                  price=" €39.99"
                  title=" Endura Hummvee Cycling Trousers II"
                />
              </div>
            </SwiperSlide>
          </Carousel>

第二个滑块代码 #

<Carousel
        style={{ height: "464px" }}
        responsive
        breakpoints={{
          // when window width is >= 480px
          480: {
            slidesPerView: 2,
            //spaceBetween: 40,
          },
          // when window width is >= 640px
          768: {
            slidesPerView: 3,
            //spaceBetween: 100,
          },
          992: {
            slidesPerView: 4,
            // spaceBetween: 40,
          },
        }}
      >
        <SwiperSlide>
          <ProductCart
            image={img}
            price=" €39.99"
            title=" Endura Hummvee Cycling Trousers II"
          />
        </SwiperSlide>

        <SwiperSlide>
          <ProductCart
            image={img}
            price=" €39.99"
            title=" Endura Hummvee Cycling Trousers II"
          />
        </SwiperSlide>

        <SwiperSlide>
          <ProductCart
            image={img}
            price=" €39.99"
            title=" Endura Hummvee Cycling Trousers II"
          />
        </SwiperSlide>
        <SwiperSlide>
          <ProductCart
            image={img}
            price=" €39.99"
            title=" Endura Hummvee Cycling Trousers II"
          />
        </SwiperSlide>
        <SwiperSlide>
          <ProductCart
            image={img}
            price=" €39.99"
            title=" Endura Hummvee Cycling Trousers II"
          />
        </SwiperSlide>
      </Carousel>
    );

针对第一个滑块的空白幻灯片问题 #

Swiper的breakpoints是从大到小匹配的，当前断点顺序从小到大，导致1168px的配置无法正确覆盖992px的设置，加上loop模式下幻灯片克隆逻辑异常，最终出现空白。

修改第一个滑块的breakpoints，按宽度从大到小排序：

breakpoints={{
  1168: {
    slidesPerView: 1,
  },
  992: {
    slidesPerView: 4,
  },
  768: {
    slidesPerView: 3,
  },
  480: {
    slidesPerView: 1,
  },
}}

针对第二个滑块的布局异常问题 #

窗口resize时Swiper没有自动重新计算布局，加上固定height限制，导致幻灯片尺寸异常。给Carousel组件的主Swiper添加监听属性，同时调整断点顺序：

1. 修改Carousel组件中的Swiper配置，添加observer和observeParents：

<Swiper
  style={props.style}
  className={props.class}
  modules={[Thumbs, Navigation]}
  thumbs={{
    swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
  }}
  loop={true}
  observer={true} // 监听容器尺寸变化
  observeParents={true} // 监听父元素尺寸变化
  breakpoints={props.responsive && props.breakpoints}
  spaceBetween={props.space}
  slidesPerView={props.spv}
  navigation
  onSwiper={(swiper) => console.log(swiper)}
  onSlideChange={() => console.log("slide change")}
>

2. 调整第二个滑块的breakpoints顺序为从大到小：

breakpoints={{
  992: {
    slidesPerView: 4,
  },
  768: {
    slidesPerView: 3,
  },
  480: {
    slidesPerView: 2,
  },
}}

3. 建议移除固定的style={{ height: "464px" }}，让幻灯片高度自适应，避免布局挤压。

额外优化 #

Carousel组件中slidesPerView={props.spv}可能和断点配置冲突，若未使用spv属性，建议直接删除该配置，避免默认值干扰断点的slidesPerView设置。

内容的提问来源于stack exchange，提问作者Hossein Ansari