pure-react-carousel：动态映射不等宽幻灯片导致显示计数异常求助

方案1：禁用slidesToShow，基于实际宽度实现滚动 #

slidesToShow是按数量控制显示的，完全不适合不等宽场景，直接弃用。改用ref获取每个slide的实际宽度，手动计算滚动距离：

import { useState, useRef, useEffect } from 'react';
import { Carousel, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

function UnequalWidthCarousel({ items }) {
  const carouselRef = useRef(null);
  const slideRefs = useRef([]);
  const [currentScrollLeft, setCurrentScrollLeft] = useState(0);
  const containerWidth = 800; // 自定义carousel容器宽度

  // 收集所有slide的DOM引用
  useEffect(() => {
    slideRefs.current = slideRefs.current.slice(0, items.length);
  }, [items]);

  const handleNext = () => {
    let targetScroll = 0;
    // 找到第一个超出当前可视区域的slide，滚动到它的起始位置
    for (let i = 0; i < slideRefs.current.length; i++) {
      const slide = slideRefs.current[i];
      const slideRight = slide.offsetLeft + slide.offsetWidth;
      if (slideRight > currentScrollLeft + containerWidth) {
        targetScroll = slide.offsetLeft;
        break;
      }
    }
    setCurrentScrollLeft(targetScroll);
    carouselRef.current.scrollTo({ left: targetScroll, behavior: 'smooth' });
  };

  const handleBack = () => {
    let targetScroll = 0;
    // 找到最后一个完全在当前可视区域左侧的slide，滚动到它的起始位置
    for (let i = slideRefs.current.length - 1; i >= 0; i--) {
      const slide = slideRefs.current[i];
      const slideRight = slide.offsetLeft + slide.offsetWidth;
      if (slideRight <= currentScrollLeft) {
        targetScroll = slide.offsetLeft;
        break;
      }
    }
    setCurrentScrollLeft(targetScroll);
    carouselRef.current.scrollTo({ left: targetScroll, behavior: 'smooth' });
  };

  return (
    <div style={{ width: containerWidth, overflow: 'hidden' }}>
      <Carousel
        ref={carouselRef}
        trackWidth="auto"
        slidesToShow={undefined}
        enableAutoPlay={false}
      >
        {items.map((item, index) => (
          <Slide key={index}>
            <div 
              ref={el => slideRefs.current[index] = el}
              style={{ 
                display: 'inline-block', 
                marginRight: '10px', // 自定义slide间距
                whiteSpace: 'nowrap'
              }}
            >
              {item.content}
            </div>
          </Slide>
        ))}
      </Carousel>
      <ButtonBack onClick={handleBack}>←</ButtonBack>
      <ButtonNext onClick={handleNext}>→</ButtonNext>
    </div>
  );
}

方案2：用trackWidth="auto"结合CSS自适应 #

让carousel轨道自适应所有slide的总宽度，容器只显示固定宽度的区域，依赖浏览器原生横向滚动：

import { Carousel, Slide } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

function AdaptiveCarousel({ items }) {
  return (
    <div style={{ width: '800px', overflowX: 'auto', overflowY: 'hidden' }}>
      <Carousel trackWidth="auto" slidesToShow={undefined}>
        {items.map((item, index) => (
          <Slide key={index}>
            <div style={{ display: 'inline-block', margin: '0 8px' }}>
              {item.content}
            </div>
          </Slide>
        ))}
      </Carousel>
    </div>
  );
}

如果需要自定义前后按钮，直接结合方案1的滚动逻辑即可。

方案3：提前预设宽度（适合内容类型可预判的场景） #

如果能根据内容类型提前确定宽度，直接给每个slide设置固定宽度，避免动态宽度带来的混乱：

<Slide key={index}>
  <div 
    style={{ 
      width: item.type === 'icon' ? '50px' : '150px',
      display: 'inline-block',
      marginRight: '12px'
    }}
  >
    {item.content}
  </div>
</Slide>

消除多余空白的注意点 #

• 控制slide的margin/padding，避免多余间距
• 给Carousel的track组件设置padding: 0，清除默认内边距
• 用inline-block或flex布局排列slide，不要用float导致布局断裂

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