DaisyUI轮播组件切换异常：需等待前一轮播停止才可切换

核心原因 #

DaisyUI轮播组件默认采用了全局事件监听或共享状态锁，导致同一时间仅能有一个轮播执行过渡动画，无法并行操作多个轮播实例。

解决方案：给每个轮播添加独立控制逻辑 #

1. 自定义独立轮播组件（推荐） #

放弃依赖DaisyUI默认的全局控制，为每个轮播实例创建独立的状态与锁机制，避免全局阻塞：

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

function IndependentCarousel({ items }) {
  const [currentSlide, setCurrentSlide] = useState(0);
  const carouselRef = useRef(null);
  const isAnimating = useRef(false);

  const switchSlide = (direction) => {
    if (isAnimating.current) return;
    isAnimating.current = true;
    
    const totalSlides = items.length;
    setCurrentSlide(prev => {
      const newIndex = direction === 'next' ? (prev + 1) % totalSlides : (prev - 1 + totalSlides) % totalSlides;
      return newIndex;
    });
  };

  useEffect(() => {
    const handleTransitionEnd = () => {
      isAnimating.current = false;
    };
    const carouselEl = carouselRef.current;
    if (carouselEl) {
      carouselEl.addEventListener('transitionend', handleTransitionEnd);
    }
    return () => carouselEl?.removeEventListener('transitionend', handleTransitionEnd);
  }, []);

  return (
    <div ref={carouselRef} className="carousel relative overflow-hidden">
      <div 
        className="carousel-inner flex transition-transform duration-500 ease-in-out"
        style={{ transform: `translateX(-${currentSlide * 100}%)` }}
      >
        {items.map((item, idx) => (
          <div key={idx} className="carousel-item w-full">
            {item}
          </div>
        ))}
      </div>
      <button onClick={() => switchSlide('prev')} className="absolute left-4 top-1/2 -translate-y-1/2 btn btn-circle btn-sm">‹</button>
      <button onClick={() => switchSlide('next')} className="absolute right-4 top-1/2 -translate-y-1/2 btn btn-circle btn-sm">›</button>
    </div>
  );
}

2. 改造现有DaisyUI轮播的全局锁 #

如果不想完全重写组件，可通过以下方式修改默认逻辑：

• 给每个轮播实例添加唯一标识（如data-carousel-id="carousel-1"）
• 找到DaisyUI轮播的事件监听代码，将全局document监听改为针对单个轮播元素的监听
• 将全局的动画锁定变量（如isAnimating）改为每个轮播实例的局部属性，避免跨实例阻塞

3. 禁用自动轮播的全局定时器 #

若使用自动轮播功能，需为每个轮播创建独立定时器，不要共用全局定时器，确保切换操作不会互相干扰。

关键注意点 #

• 每个轮播的transitionend事件仅监听自身元素，禁止事件冒泡导致全局拦截
• 切换操作前必须检查当前轮播的动画状态，仅在非动画状态下执行切换
• 动画结束后必须及时释放当前轮播的锁定状态，保证自身可连续操作

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