为Embla Carousel实现点击触发的全屏轮播模态框方案咨询

以下是基于React TypeScript、Embla Carousel、TailwindCSS和ShadCN的完整实现步骤：

1. 核心状态管理 #

在父组件中维护控制模态框显示和定位的状态：

import { useState } from 'react';

const Gallery = () => {
  // 控制模态框开关
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 记录点击的轮播项索引，用于模态框轮播定位
  const [activeSlideIdx, setActiveSlideIdx] = useState(0);
  // 你的轮播数据（示例结构）
  const slides = [
    { id: 1, imageUrl: '/img1.jpg', alt: '图1' },
    { id: 2, imageUrl: '/img2.jpg', alt: '图2' },
    // ...更多数据
  ];

  // 后续逻辑...
};

2. 主轮播项添加点击触发逻辑 #

给主轮播的每个slide绑定点击事件，点击时记录索引并打开模态框：

// 主轮播的Slide组件
const MainCarouselSlide = ({ slide, index, onSlideClick }: { 
  slide: typeof slides[0], 
  index: number, 
  onSlideClick: (idx: number) => void 
}) => {
  return (
    <div 
      className="embla__slide cursor-pointer p-1"
      onClick={() => onSlideClick(index)}
    >
      <img 
        src={slide.imageUrl} 
        alt={slide.alt} 
        className="w-full h-auto rounded-md object-cover"
      />
    </div>
  );
};

// 在主轮播中使用
<EmblaCarousel>
  {slides.map((slide, idx) => (
    <MainCarouselSlide 
      key={slide.id} 
      slide={slide} 
      index={idx} 
      onSlideClick={(idx) => {
        setActiveSlideIdx(idx);
        setIsModalOpen(true);
      }} 
    />
  ))}
</EmblaCarousel>

3. 实现全屏模态框轮播 #

用ShadCN的Modal组件包裹Embla Carousel，实现全屏效果并自动定位到点击项：

import { Modal, ModalContent, ModalCloseButton } from '@/components/ui/modal';
import { useEmblaCarousel } from 'embla-carousel-react';
import { useEffect } from 'react';

const FullscreenModalCarousel = ({ 
  isOpen, 
  onClose, 
  slides, 
  targetIndex 
}: {
  isOpen: boolean,
  onClose: () => void,
  slides: typeof slides,
  targetIndex: number
}) => {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true, // 可选：开启循环滚动
    containScroll: 'trimSnaps',
  });

  // 模态框打开时，自动滚动到目标slide
  useEffect(() => {
    if (isOpen && emblaApi) {
      emblaApi.scrollTo(targetIndex);
      emblaApi.reInit(); // 适配全屏尺寸重新初始化
    }
  }, [isOpen, emblaApi, targetIndex]);

  return (
    <Modal open={isOpen} onOpenChange={onClose}>
      <ModalContent className="max-w-full max-h-full w-screen h-screen p-0 bg-black/95">
        <ModalCloseButton className="absolute top-4 right-4 text-white z-10" />
        <div className="embla w-full h-full">
          <div ref={emblaRef} className="embla__container flex h-full">
            {slides.map((slide) => (
              <div key={slide.id} className="embla__slide min-w-full h-full">
                <img 
                  src={slide.imageUrl} 
                  alt={slide.alt} 
                  className="w-full h-full object-contain"
                />
              </div>
            ))}
          </div>
          {/* 可选：添加前后导航按钮 */}
          <button 
            className="absolute left-4 top-1/2 -translate-y-1/2 text-white bg-black/50 p-2 rounded-full hover:bg-black/70 transition"
            onClick={() => emblaApi?.scrollPrev()}
          >
            ←
          </button>
          <button 
            className="absolute right-4 top-1/2 -translate-y-1/2 text-white bg-black/50 p-2 rounded-full hover:bg-black/70 transition"
            onClick={() => emblaApi?.scrollNext()}
          >
            →
          </button>
        </div>
      </ModalContent>
    </Modal>
  );
};

4. 整合到父组件 #

在父组件中引入模态框组件，传入状态和数据：

const Gallery = () => {
  // 之前的状态和slides数据...

  return (
    <div className="container mx-auto py-8">
      {/* 主轮播 */}
      <div className="max-w-4xl mx-auto">
        <EmblaCarousel>
          {/* 主轮播Slide组件... */}
        </EmblaCarousel>
      </div>

      {/* 全屏模态框轮播 */}
      <FullscreenModalCarousel 
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        slides={slides}
        targetIndex={activeSlideIdx}
      />
    </div>
  );
};

关键细节说明 #

• 模态框打开时调用emblaApi.scrollTo()定位到点击的slide，reInit()确保轮播适应全屏尺寸
• 全屏slide设置min-w-full h-full，图片用object-contain保证完整显示
• ShadCN的ModalContent通过max-w-full max-h-full w-screen h-screen实现全屏效果

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