Thành phần
Carousel
Slides on Embla: ruled slides, numbered Barlow Condensed controls, labelled previous and next, jumps under reduced motion.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Politics
Budget passes its second reading
The vote followed a long debate on the cost of the new rail link.
Business
Port strike enters its third day
Shipping firms say deliveries to the north will be late this week.
Culture
Museum reopens its east wing
The restored galleries hold the city's oldest printed maps.
Science
Telescope finds a quiet star
Astronomers describe a calm, old sun with three small worlds.
Install
bash
npx shadcn add @eloquent/carouselThis adds embla-carousel-react (Base UI has no carousel) and the button item.
Usage
tsx
import {
Carousel, CarouselContent, CarouselControls, CarouselItem,
CarouselNext, CarouselNumbers, CarouselPrevious, CarouselStatus,
} from "@/components/ui/carousel";
<Carousel aria-label="Front page stories">
<CarouselContent>
<CarouselItem aria-label="Slide 1 of 2">…</CarouselItem>
<CarouselItem aria-label="Slide 2 of 2">…</CarouselItem>
</CarouselContent>
<CarouselControls>
<CarouselPrevious aria-label="Previous slide" />
<CarouselNumbers getLabel={(n) => `Go to slide ${n}`} aria-label="Front page stories" />
<CarouselStatus />
<CarouselNext aria-label="Next slide" />
</CarouselControls>
</Carousel>The component carries no English text. Name the region, the slides, the previous and next buttons and each number through props. The Embla API is available through setApi and useCarousel().
States
Two slides in view, with text on the buttons. The first slide has no previous slide, so Previous is disabled.
Politics
Budget passes its second reading
Business
Port strike enters its third day
Culture
Museum reopens its east wing
Science
Telescope finds a quiet star
| State | Treatment |
|---|---|
| Current number | Ink fill and aria-current |
| Other numbers | 1px ink outline; ink fill on press |
| Previous at the start, Next at the end | Disabled: grey text and rule, not allowed |
| Focus | 2px ink outline, 2px offset |
| Reduced motion | Jumps to the slide, no animation |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the visible slides' content and the controls; slides out of view are skipped |
| Arrow Left / Right | Previous / next slide, while focus is inside the carousel (Up / Down when vertical) |
| Enter / Space on Previous, Next or a number | Moves to that slide |
Vietnamese
Chính trị
Ngân sách qua vòng đọc thứ hai
Cuộc bỏ phiếu diễn ra sau cuộc tranh luận dài về chi phí tuyến đường sắt mới.
Kinh doanh
Đình công cảng kéo sang ngày thứ ba
Các hãng tàu cho biết hàng giao lên phía bắc sẽ chậm trong tuần này.
Văn hoá
Bảo tàng mở lại cánh phía đông
Các phòng trưng bày được phục dựng lưu giữ những tấm bản đồ in cổ nhất của thành phố.
Khoa học
Kính thiên văn tìm thấy một ngôi sao lặng
Các nhà thiên văn mô tả một mặt trời già, êm ả cùng ba hành tinh nhỏ.
Ink adaptation
Upstream's round icon buttons over the slides and its dot indicators become a ruled control row: square 44px buttons, numbered buttons and a Barlow Condensed counter. The current slide is an ink fill with aria-current, never a colour. There is no shadow and no radius.