如何实现React JS + TailwindCSS循环横向轮播组件？

下面是针对你的需求修改后的完整代码，实现横向滑动且到末尾自动回到开头的无缝循环效果：

import { useState, useEffect, useRef } from 'react';

const Carousel = () => {
  const [index, setIndex] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(true);
  const carouselRef = useRef(null);
  // 原始滑块数据
  const slides = [
    { className: 'from-green-300 to-cyan-400' },
    { className: 'from-fuchsia-600 to-pink-500' },
    { className: 'from-red-400 to-orange-300' }
  ];
  // 复制第一个滑块到末尾，用于无缝循环
  const extendedSlides = [...slides, slides[0]];
  const slideWidth = 55; // 对应你设置的w-[55%]
  const gap = 10; // 对应space-x-10的间距，单位rem

  useEffect(() => {
    // 自动轮播定时器，每3秒切换一次
    const interval = setInterval(() => {
      setIndex(prev => prev + 1);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    // 当滚动到最后一个复制的滑块时，瞬间重置到开头
    if (index === extendedSlides.length - 1) {
      setTimeout(() => {
        setIsTransitioning(false);
        setIndex(0);
        // 强制DOM更新后重新开启过渡
        setTimeout(() => setIsTransitioning(true), 50);
      }, 300); // 对应transition的duration-300
    }
  }, [index, extendedSlides.length]);

  return (
    <div className="mx-10 py-5 overflow-x-hidden">
      <div
        ref={carouselRef}
        className={`flex flex-none min-w-screen bg-gray-900 space-x-10 transition-transform ${isTransitioning ? 'duration-300' : ''}`}
        style={{
          transform: `translateX(-${index * (slideWidth + gap)}%)`
        }}
      >
        {extendedSlides.map((slide, idx) => (
          <div
            key={idx}
            className={`flex-none w-[${slideWidth}%] h-48 bg-gradient-to-r ${slide.className} rounded-3xl text-3xl`}
          >
            {/* 可以添加滑块内容 */}
            Slide {idx + 1}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Carousel;

关键修改点说明： #

• 无缝循环处理：复制第一个滑块到列表末尾，当轮播到这个复制的滑块时，瞬间将索引重置为0，因为视觉上和第一个滑块完全一致，用户不会察觉到跳转
• 过渡控制：用isTransitioning状态控制过渡效果，重置索引时临时关闭过渡，避免出现反向滑动的视觉bug
• 自动轮播逻辑：通过setInterval实现定时切换，组件卸载时清理定时器防止内存泄漏
• 滑动距离计算：根据滑块宽度和间距计算每次滑动的距离，确保滑动位置准确

自定义调整项： #

• 修改setInterval的时间（当前3000ms）可以调整自动轮播的速度
• 调整slideWidth和gap的值可以匹配你实际的滑块尺寸和间距
• 可以添加左右切换按钮，只需要在按钮点击时调用setIndex(prev => prev + 1)或setIndex(prev => prev - 1)，同时处理边界情况

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