import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@anker-in/headless-ui' import { Card, CardContent } from '@anker-in/headless-ui' function CarouselDemo() { return (

{/* 基础轮播图 */}

基础轮播图

1 2 3

{/* 带图片的轮播图 */}

图片轮播

{Array.from({ length: 5 }).map((_, index) => (

{index + 1}

图片 {index + 1}

))}

{/* 多列显示 */}

多列显示

{Array.from({ length: 8 }).map((_, index) => ( {index + 1} ))}

{/* 产品展示轮播 */}

产品展示

{[ { name: '产品 A', price: '¥299', description: '高质量的产品A，功能强大且易用' }, { name: '产品 B', price: '¥599', description: '专业级产品B，适合高端用户使用' }, { name: '产品 C', price: '¥199', description: '经济实惠的产品C，性价比超高' }, { name: '产品 D', price: '¥799', description: '旗舰产品D，集成最新技术' }, ].map((product, index) => (

📦

{product.name}

{product.description}

{product.price}

))}

{/* 垂直方向轮播 */}

垂直轮播

{Array.from({ length: 5 }).map((_, index) => ( {index + 1} ))}

) }

Carousel

基本用法

基础轮播图

图片轮播

多列显示

产品展示

产品 A

产品 B

产品 C

产品 D

垂直轮播