The Carousel component enables users to navigate through a collection of images or content panels. It’s ideal for galleries, product showcases, and other media-driven interfaces.
1
2
3
4
5
<?php
use Lib\PHPXUI\{Card, CardContent, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious};
?>
<Carousel class="w-full max-w-xs">
<CarouselContent>
<?php for ($i = 0; $i < 5; $i++): ?>
<CarouselItem>
<div class="p-1">
<Card>
<CardContent class="flex aspect-square items-center justify-center p-6">
<span class="text-4xl font-semibold"><?= $i + 1 ?></span>
</CardContent>
</Card>
</div>
</CarouselItem>
<?php endfor; ?>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
Installation
npm
npx phpxui add Carousel