React版Swiper轮播如何适配所在父级section容器宽度

你遇到的宽度不生效核心原因是：Swiper初始化时会自动给根节点注入内联width样式，内联样式优先级高于你在自定义类里写的CSS规则，所以不管是width: 100%还是calc(100% - 300px)都会被默认样式覆盖。另外你现有代码存在模块漏引问题，配置的分页、自动播放功能实际不会生效。

以下是两种可直接落地的方案：

方案1：官方API适配（推荐，适配动态布局） #

直接用Swiper提供的width配置项传入父容器实际宽度，配合尺寸监听自动适配侧边栏展开/折叠、窗口缩放等动态变化场景，不需要手动写calc计算。

import { useState, useEffect, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const MediaCarousel = (props) => {
  const sectionRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState(0);

  useEffect(() => {
    if (!sectionRef.current) return;
    // 监听父容器尺寸变化，实时获取可用宽度
    const resizeObserver = new ResizeObserver(entries => {
      const [entry] = entries;
      setContainerWidth(entry.contentRect.width);
    });
    resizeObserver.observe(sectionRef.current);
    return () => resizeObserver.disconnect();
  }, []);

  return (
    <section ref={sectionRef} className="w-full overflow-hidden">
      <div className="border-4 w-full">
        <Swiper
          className='width-carousel'
          modules={[Navigation, Pagination, Autoplay]}
          width={containerWidth}
          spaceBetween={40}
          slidesPerView={2.5}
          pagination={{ clickable: true }}
          autoplay={{ delay: 2500, disableOnInteraction: false }}
        >
          {props.mediaArea.mediaObjects?.map((slide, index) => {
            return (
              <SwiperSlide key={index}>
                <img 
                  className="rounded-lg shadow-lg p-3 h-96 w-full object-cover" 
                  src={slide.contentUrl ?? "https://dummyimage.com/600x400/000/fff"} 
                  alt={slide.title ?? ""} 
                />
                {slide.title && <p className="font-Montserrat font-semibold mt-8">{slide.title}</p>}
                {slide.description && <p className="font-Montserrat text-gray-500 text-sm">{slide.description}</p>}
              </SwiperSlide>
            )
          })}
        </Swiper>
      </div>
    </section>
  )
}

export default MediaCarousel;

方案2：CSS覆盖（适合固定布局场景） #

如果你的侧边栏宽度固定、布局不会动态变化，可以通过提高CSS选择器优先级覆盖Swiper默认内联样式，不需要写额外JS逻辑：

• 先确认所有外层父节点（包含目标<section>容器、Swiper外层的border-4div）都设置了width: 100%和overflow: hidden，避免宽度溢出
• 写入以下CSS规则覆盖默认样式：

/* 选择器优先级高于默认类，覆盖内联宽度 */
section .width-carousel.swiper {
  width: 100% !important;
  overflow: hidden;
}
/* 约束内部wrapper宽度，避免滑块撑破容器 */
section .width-carousel .swiper-wrapper {
  width: 100%;
}

额外注意点 #

• 你之前的代码只在modules中引入了Navigation，配置的pagination、autoplay功能需要同步引入Pagination、Autoplay模块才能正常生效
• 轮播内的图片建议加上w-full object-cover类，避免图片原始尺寸撑破滑块宽度

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