ThreeDCarousel (轮播)

import type { Media, Theme } from '../../types/props'
 
export interface ThreeDCarouselItem {
  /** 主题 */
  theme?: Theme
  /** 桌面端图片 */
  imageUrl: Media | null
  /** 移动端图片 */
  mobImageUrl: Media | null
  /** 标题 */
  title: string
  /** 描述 */
  description: string
  /** 按钮文本 */
  buttonText?: string
  /** 按钮链接 */
  buttonLink?: string | null
}
 
export interface ThreeDCarouselProps {
  data: {
    title: string
    /** 轮播项列表 */
    items: ThreeDCarouselItem[]
  }
  /** 自定义类名 */
  className?: string
}

import { ThreeDCarousel } from '@anker-in/headless-ui/biz'
 
<ThreeDCarousel
  data={{
    title: 'Product Features',
    items: [
      {
        imageUrl: { url: '/feature1-desktop.jpg', alt: 'Feature 1' },
        mobImageUrl: { url: '/feature1-mobile.jpg', alt: 'Feature 1' },
        title: 'Advanced Technology',
        description: 'Cutting-edge innovation for superior performance',
        buttonText: 'Learn More',
        buttonLink: '/features/technology',
      },
      {
        imageUrl: { url: '/feature2-desktop.jpg', alt: 'Feature 2' },
        mobImageUrl: { url: '/feature2-mobile.jpg', alt: 'Feature 2' },
        title: 'User-Friendly Design',
        description: 'Intuitive interface for effortless control',
        buttonText: 'Explore',
        buttonLink: '/features/design',
      },
      {
        imageUrl: { url: '/feature3-desktop.jpg', alt: 'Feature 3' },
        mobImageUrl: { url: '/feature3-mobile.jpg', alt: 'Feature 3' },
        title: 'Premium Quality',
        description: 'Built to last with superior materials',
        buttonText: 'Shop Now',
        buttonLink: '/shop',
      },
    ],
  }}
/>

<ThreeDCarousel
  data={{
    title: 'Midnight Collection',
    items: [
      {
        theme: 'dark', // 使用暗色主题
        imageUrl: { url: '/night-scene1.jpg', alt: 'Night Scene 1' },
        mobImageUrl: { url: '/night-scene1-mobile.jpg', alt: 'Night Scene 1' },
        title: 'Night Vision',
        description: 'See clearly in complete darkness',
        buttonText: 'Discover',
        buttonLink: '/features/night-vision',
      },
      {
        theme: 'dark',
        imageUrl: { url: '/night-scene2.jpg', alt: 'Night Scene 2' },
        mobImageUrl: { url: '/night-scene2-mobile.jpg', alt: 'Night Scene 2' },
        title: 'Silent Operation',
        description: 'Whisper-quiet performance',
        buttonText: 'Learn More',
        buttonLink: '/features/silent',
      },
    ],
  }}
/>

<ThreeDCarousel
  data={{
    title: 'Visual Gallery',
    items: [
      {
        imageUrl: { url: '/gallery1.jpg', alt: 'Gallery Image 1' },
        mobImageUrl: { url: '/gallery1-mobile.jpg', alt: 'Gallery Image 1' },
        title: 'Mountain Landscape',
        description: 'Breathtaking views from the summit',
        // 不提供 buttonText,按钮不显示
      },
      {
        imageUrl: { url: '/gallery2.jpg', alt: 'Gallery Image 2' },
        mobImageUrl: { url: '/gallery2-mobile.jpg', alt: 'Gallery Image 2' },
        title: 'Ocean Sunset',
        description: 'Golden hour by the sea',
      },
      {
        imageUrl: { url: '/gallery3.jpg', alt: 'Gallery Image 3' },
        mobImageUrl: { url: '/gallery3-mobile.jpg', alt: 'Gallery Image 3' },
        title: 'Forest Trail',
        description: 'Explore the wilderness',
      },
    ],
  }}
/>

<ThreeDCarousel
  data={{
    title: 'Quick Setup',
    items: [
      {
        imageUrl: { url: '/setup-desktop.jpg', alt: 'Setup Guide' },
        mobImageUrl: null, // 移动端自动使用 imageUrl
        title: 'Easy Installation',
        description: 'Get started in minutes',
        buttonText: 'Start',
        buttonLink: '/setup',
      },
    ],
  }}
/>

<ThreeDCarousel
  data={{
    title: 'Premium Experience',
    items: [
      {
        imageUrl: { url: '/premium1.jpg', alt: 'Premium 1' },
        mobImageUrl: { url: '/premium1-mobile.jpg', alt: 'Premium 1' },
        title: 'Luxury Design',
        description: 'Elegance meets functionality',
        buttonText: 'Explore',
        buttonLink: '/premium',
      },
    ],
  }}
  className="bg-gradient-to-b from-slate-900 to-slate-800 py-20"
/>

/* 导航按钮渐变色 */
.three-d-carousel__nav-icon {
  color: #667eea;
  transition: all 0.3s ease;
}
 
.three-d-carousel__nav-icon:hover {
  color: #764ba2;
  transform: scale(1.1);
}
 
/* 导航按钮圆圈背景 */
.three-d-carousel__nav-button {
  opacity: 0.8;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
 
.three-d-carousel__nav-button:hover {
  opacity: 1;
}

<ThreeDCarousel
  data={{
    title: 'Experience <span class="text-blue-400">Revolutionary</span> Technology',
    items: [
      {
        imageUrl: { url: '/tech1.jpg', alt: 'Technology 1' },
        mobImageUrl: { url: '/tech1-mobile.jpg', alt: 'Technology 1' },
        title: '<strong>AI-Powered</strong> Intelligence',
        description: 'Smart features that <em>adapt</em> to your needs',
        buttonText: 'Learn More',
        buttonLink: '/ai',
      },
    ],
  }}
/>

<ThreeDCarousel
  data={{
    title: 'Hero Product',
    items: [
      {
        imageUrl: { url: '/hero-desktop.jpg', alt: 'Hero Product' },
        mobImageUrl: { url: '/hero-mobile.jpg', alt: 'Hero Product' },
        title: 'Our Flagship Model',
        description: 'The ultimate solution for your needs',
        buttonText: 'Shop Now',
        buttonLink: '/shop/flagship',
      },
    ],
  }}
/>

<ThreeDCarousel
  data={{
    title: 'Complete Product Line',
    items: [
      {
        imageUrl: { url: '/product1-desktop.jpg', alt: 'Product 1' },
        mobImageUrl: { url: '/product1-mobile.jpg', alt: 'Product 1' },
        title: 'Model A',
        description: 'Entry-level performance',
        buttonText: 'View Details',
        buttonLink: '/products/a',
      },
      {
        imageUrl: { url: '/product2-desktop.jpg', alt: 'Product 2' },
        mobImageUrl: { url: '/product2-mobile.jpg', alt: 'Product 2' },
        title: 'Model B',
        description: 'Balanced features and price',
        buttonText: 'View Details',
        buttonLink: '/products/b',
      },
      {
        imageUrl: { url: '/product3-desktop.jpg', alt: 'Product 3' },
        mobImageUrl: { url: '/product3-mobile.jpg', alt: 'Product 3' },
        title: 'Model C',
        description: 'Advanced capabilities',
        buttonText: 'View Details',
        buttonLink: '/products/c',
      },
      {
        imageUrl: { url: '/product4-desktop.jpg', alt: 'Product 4' },
        mobImageUrl: { url: '/product4-mobile.jpg', alt: 'Product 4' },
        title: 'Model D',
        description: 'Professional grade',
        buttonText: 'View Details',
        buttonLink: '/products/d',
      },
      {
        imageUrl: { url: '/product5-desktop.jpg', alt: 'Product 5' },
        mobImageUrl: { url: '/product5-mobile.jpg', alt: 'Product 5' },
        title: 'Model E',
        description: 'Premium performance',
        buttonText: 'View Details',
        buttonLink: '/products/e',
      },
      {
        imageUrl: { url: '/product6-desktop.jpg', alt: 'Product 6' },
        mobImageUrl: { url: '/product6-mobile.jpg', alt: 'Product 6' },
        title: 'Model F',
        description: 'Ultimate flagship',
        buttonText: 'View Details',
        buttonLink: '/products/f',
      },
    ],
  }}
/>

function CarouselWithRef() {
  const carouselRef = useRef<HTMLDivElement>(null)
 
  const scrollToCarousel = () => {
    carouselRef.current?.scrollIntoView({ behavior: 'smooth' })
  }
 
  return (
    <div>
      <button onClick={scrollToCarousel}>Go to Carousel</button>
      <ThreeDCarousel
        ref={carouselRef}
        data={{
          title: 'Scroll Target',
          items: [
            {
              imageUrl: { url: '/scroll-desktop.jpg', alt: 'Scroll Target' },
              mobImageUrl: { url: '/scroll-mobile.jpg', alt: 'Scroll Target' },
              title: 'Find Me',
              description: 'Click the button above to scroll here',
              buttonText: 'Got It',
              buttonLink: '#',
            },
          ],
        }}
      />
    </div>
  )
}

<ThreeDCarousel
  data={{
    title: 'Day & Night',
    items: [
      {
        theme: 'light', // 明亮主题
        imageUrl: { url: '/day-scene.jpg', alt: 'Day Scene' },
        mobImageUrl: { url: '/day-scene-mobile.jpg', alt: 'Day Scene' },
        title: 'Daytime Performance',
        description: 'Optimized for bright environments',
        buttonText: 'Learn More',
        buttonLink: '/day',
      },
      {
        theme: 'dark', // 暗色主题
        imageUrl: { url: '/night-scene.jpg', alt: 'Night Scene' },
        mobImageUrl: { url: '/night-scene-mobile.jpg', alt: 'Night Scene' },
        title: 'Nighttime Excellence',
        description: 'Designed for low-light conditions',
        buttonText: 'Learn More',
        buttonLink: '/night',
      },
    ],
  }}
/>

const isMobile = useMediaQuery({ query: '(max-width: 768px)' })
 
// 桌面端配置
{
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 300,
    modifier: 1,
    slideShadows: false,
  },
  slidesPerView: 'auto',
  centeredSlides: true,
}
 
// 移动端配置
{
  effect: 'slide',
  slidesPerView: 1.2,
  spaceBetween: 16,
  centeredSlides: true,
}

// 桌面端显示 imageUrl
<Picture
  source={isMobile ? item.mobImageUrl?.url : item.imageUrl?.url}
  alt={isMobile ? item.mobImageUrl?.alt : item.imageUrl?.alt}
  className="tablet:block hidden" // 桌面端显示
/>
 
// 移动端显示 mobImageUrl (降级到 imageUrl)
<Picture
  source={item.mobImageUrl?.url || item.imageUrl?.url}
  alt={item.mobImageUrl?.alt || item.imageUrl?.alt}
  className="tablet:hidden block" // 移动端显示
/>

# 使用 ImageMagick 优化图片
# 桌面端图片
convert input.jpg -resize 1648x960^ -gravity center -extent 1648x960 -quality 85 desktop.jpg
 
# 移动端图片
convert input.jpg -resize 592x720^ -gravity center -extent 592x720 -quality 85 mobile.jpg

<section
  role="region"
  aria-label={title}
  data-ui-component-id="ThreeDCarousel"
>
  <Heading as="h2" html={title} />
 
  <div
    role="group"
    aria-roledescription="carousel【✅ 已发布】"
  >
    {items.map((item, index) => (
      <div
        role="group"
        aria-roledescription="slide"
        aria-label={`Slide ${index + 1} of ${items.length}`}
      >
        <Picture
          source={item.imageUrl?.url}
          alt={item.imageUrl?.alt}
        />
      </div>
    ))}
  </div>
 
  <button
    aria-label="Previous slide"
    className="three-d-carousel__nav-button--prev"
  >
    <svg aria-hidden="true">...</svg>
  </button>
 
  <button
    aria-label="Next slide"
    className="three-d-carousel__nav-button--next"
  >
    <svg aria-hidden="true">...</svg>
  </button>
</section>

// 使用useMemo缓存数据处理
const processedItems = useMemo(() => {
  // 小于4项时自动克隆
  if (items.length < 4) {
    return [...items, ...items, ...items, ...items]
  }
  return items
}, [items])
 
// 使用React.memo包裹子组件
const CarouselSlide = React.memo(({ item }) => (
  <div className="three-d-carousel__slide">
    {/* 滑块内容 */}
  </div>
))

// 图片懒加载
<Picture
  source={item.imageUrl?.url}
  alt={item.imageUrl?.alt}
  loading="lazy"
/>
 
// 响应式图片
<picture>
  <source
    media="(min-width: 768px)"
    srcSet={item.imageUrl?.url}
  />
  <source
    media="(max-width: 767px)"
    srcSet={item.mobImageUrl?.url || item.imageUrl?.url}
  />
  <img src={item.imageUrl?.url} alt={item.imageUrl?.alt} />
</picture>

// 仅加载必要模块
import { Swiper, SwiperSlide } from 'swiper/react'
import { EffectCoverflow, Navigation } from 'swiper/modules'
 
// 优化配置
<Swiper
  modules={[EffectCoverflow, Navigation]}
  lazy={true}
  preloadImages={false}
  watchSlidesProgress={true}
/>

.three-d-carousel__nav-icon {
  color: #667eea;
}
 
.three-d-carousel__nav-button {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

<Picture
  source={item.mobImageUrl?.url || item.imageUrl?.url}
  alt={item.mobImageUrl?.alt || item.imageUrl?.alt}
/>

<Swiper
  loop={true}
  loopedSlides={items.length}
/>

coverflowEffect: {
  rotate: 0,        // 旋转角度
  stretch: 0,       // 拉伸距离
  depth: 300,       // 深度(越大越明显)
  modifier: 1,      // 修饰符
  slideShadows: false,
}

<Swiper
  autoplay={{
    delay: 3000,
    disableOnInteraction: false,
  }}
/>

.swiper-slide:not(.swiper-slide-active) .three-d-carousel__image {
  filter: brightness(0.7) contrast(0.9);
}

<Swiper
  onSlideChange={(swiper) => {
    console.log('当前索引:', swiper.activeIndex)
  }}
/>

<Swiper
  touchRatio={1}
  threshold={5}
  simulateTouch={true}
/>