如何控制react-responsive-carousel的展示条目数（桌面3个/移动端1个）？

问题说明 #

在React项目中使用react-responsive-carousel组件，需要实现桌面端显示3个条目，移动端显示1个条目的效果：

• 尝试添加非官方属性slidesToShow，未生效；
• 通过CSS设置.slide类宽度后，滚动时从第三张开始出现空白帧，需要实现类似itemsPerPage、itemOffset的自定义滚动逻辑。

现有代码 #

JSX代码 #

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
import "./CustomIndicator.css";

export default function App() {
  return (
    <Carousel infiniteLoop>
      <div>
        <p>01</p>
        <img src={"1.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>02</p>
        <img src={"2.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>03</p>
        <img src={"3.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>04</p>
        <img src={"1.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>05</p>
        <img src={"2.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>06</p>
        <img src={"3.jpeg"} className="w-full h-full" />
      </div>
    </Carousel>
  );
}

CSS代码 #

.carousel .control-dots .dot {
  border-radius: 0% !important;
  width: 20px !important;
  height: 2px !important;
}

.carousel .control-dots .dot:active {
  border-radius: 0% !important;
  width: 20px !important;
  height: 5px !important;
}

@media only screen and (max-width: 600px) {
  .slide {
    min-width: 100% !important;
  }
}

@media only screen and (min-width: 601px) {
  .slide {
    min-width: calc(100% / 3) !important;
  }
}

解决方案 #

1. 修正CSS宽度逻辑 #

原CSS中.slide的宽度设置错误，导致滚动时布局混乱。需根据屏幕尺寸设置对应宽度：

• 移动端（≤600px）：每个slide占100%宽度，仅显示1个条目；
• 桌面端（>600px）：每个slide占1/3宽度，显示3个条目。

2. 自定义滚动步长（解决空白帧） #

react-responsive-carousel默认每次滚动1个条目，当显示多个条目时，需要让滚动步长等于可见条目数。通过状态控制当前索引，结合onChange事件实现自定义滚动：

import { useState, useEffect } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
import "./CustomIndicator.css";

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 600);
  const totalItems = 6;
  const itemsPerPage = isMobile ? 1 : 3;

  // 监听窗口大小变化，实时切换移动端/桌面端模式
  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 600);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const handleChange = (newIndex) => {
    let targetIndex;
    // 计算滚动方向，设置对应步长
    if (newIndex > currentIndex) {
      targetIndex = currentIndex + itemsPerPage;
      targetIndex = targetIndex >= totalItems ? targetIndex % totalItems : targetIndex;
    } else {
      targetIndex = currentIndex - itemsPerPage;
      targetIndex = targetIndex < 0 ? totalItems + targetIndex : targetIndex;
    }
    setCurrentIndex(targetIndex);
  };

  return (
    <Carousel 
      infiniteLoop 
      selectedItem={currentIndex}
      onChange={handleChange}
      showThumbs={false}
    >
      <div>
        <p>01</p>
        <img src={"1.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>02</p>
        <img src={"2.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>03</p>
        <img src={"3.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>04</p>
        <img src={"1.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>05</p>
        <img src={"2.jpeg"} className="w-full h-full" />
      </div>
      <div>
        <p>06</p>
        <img src={"3.jpeg"} className="w-full h-full" />
      </div>
    </Carousel>
  );
}

说明 #

• 通过selectedItem绑定当前索引，onChange事件控制滚动步长，确保每次滚动对应数量的条目；
• 监听窗口大小变化，自动调整itemsPerPage值，适配响应式需求；
• 移除无用的slidesToShow属性，遵循组件官方API规范。

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