Carousel

Home Carousel

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.

<?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

Usage

use Lib\PHPXUI\{
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
}

<Carousel>
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
    <CarouselItem>Slide 3</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Carousel const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Carousel'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage