Component Props ### Usage Preview Code ```jsx 'use client' import * as React from "react" import { Carousel } from "@xbeshui/core" export function XbCarousel() { type CarouselItemType = { type?: "image" | "text" | "video"; content?: string; }; const carouselData: CarouselItemType[] = [ { type: "image", content: "https://upload.wikimedia.org/wikipedia/commons/d/d3/July_night_sky_%2835972569256%29.jpg" }, { type: "image", content: "https://upload.wikimedia.org/wikipedia/commons/d/d3/July_night_sky_%2835972569256%29.jpg" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?sea,skylinebsv3" }, { type: "image", content: "https://upload.wikimedia.org/wikipedia/commons/d/d3/July_night_sky_%2835972569256%29.jpg" }, { type: "image", content: "https://upload.wikimedia.org/wikipedia/commons/d/d3/July_night_sky_%2835972569256%29.jpg" }, { type: "image", content: "https://upload.wikimedia.org/wikipedia/commons/d/d3/July_night_sky_%2835972569256%29.jpg" }, { type: "image", content: "https://upload.wikimedia.org/wikipedia/commons/d/d3/July_night_sky_%2835972569256%29.jpg" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?bike,skylinebsv8" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?night,skylinebsv9" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?funny,skylinebsv10" } ]; return ( ) } ```

## Example ### Carousel with Multiple Images Preview Code ```jsx 'use client' import * as React from "react" import { Carousel } from "@xbeshui/core" export function XbCarousel() { type CarouselItemType = { type?: "image" | "text" | "video"; content?: string; }; const carouselData: CarouselItemType[] = [ { type: "image", content: "https://source.unsplash.com/random/600x450/?city,skylinebsv1" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?blur,skylinebsv2" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?sea,skylinebsv3" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?rain,skylinebsv4" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?autom,skylinebsv5" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?mountain,skylinebsv6" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?car,skylinebsv7" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?bike,skylinebsv8" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?night,skylinebsv9" }, { type: "image", content: "https://source.unsplash.com/random/600x450/?funny,skylinebsv10" } ]; return ( ) } ```

### Carousel Input Component Props | Name | Type | Description | | --------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | opts | default | An object containing options for the Embla Carousel instance, such as speed, loop mode, and more. | | plugins | default | An array of plugins that can be added to the carousel to extend its functionality, like autoplay, drag and drop, or keyboard navigation. | | orientation | horizontal,vertical | A string specifying the orientation of the carousel, either "horizontal" or "vertical". | | defaultVariants | default | The DefaultVariants component allows for the definition of default styles and variants for UI elements, ensuring consistent design patterns and ease of customization. |