DocsComposantsCarousel

Carousel

Slides you scroll through, with buttons, swipe and arrow keys.

Alpine.js5 fichiers

<pb-ui.carousel class="w-full max-w-xs">
  <pb-ui.carousel-content>
    @for(n in [1, 2, 3, 4, 5])
    <pb-ui.carousel-item class="p-1">
      <div class="flex aspect-square items-center justify-center rounded-xl border bg-card text-4xl font-semibold">{{ n }}</div>
    </pb-ui.carousel-item>
    @endfor
  </pb-ui.carousel-content>
  <pb-ui.carousel-previous />
  <pb-ui.carousel-next />
</pb-ui.carousel>

Installation

pyblade-ui add carousel

Installez les dépendances
Alpine.js, chargé dans votre <head>.

Copiez ces fichiers dans votre projet

components/ui/carousel.html

<div role="region" aria-roledescription="carousel" data-slot="carousel"
  x-data="{
    atStart: true, atEnd: false,
    update() { const t = this.$refs.track; this.atStart = t.scrollLeft <= 1; this.atEnd = t.scrollLeft + t.clientWidth >= t.scrollWidth - 1 },
    go(step) { const t = this.$refs.track; t.scrollBy({ left: step * t.clientWidth, behavior: 'smooth' }) },
  }"
  x-init="$nextTick(() => update())"
  x-on:keydown.left.prevent="go(-1)" x-on:keydown.right.prevent="go(1)"
  {{ attributes.cn("relative") }}>{{ slot }}</div>

components/ui/carousel_content.html

<div data-slot="carousel-content" x-ref="track" x-on:scroll.debounce.50ms="update()" {{ attributes.cn("flex snap-x snap-mandatory overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden") }}>{{ slot }}</div>

components/ui/carousel_item.html

<div role="group" aria-roledescription="slide" data-slot="carousel-item" {{ attributes.cn("min-w-0 shrink-0 grow-0 basis-full snap-start") }}>{{ slot }}</div>

components/ui/carousel_previous.html

<button type="button" data-slot="carousel-previous" x-on:click="go(-1)" x-bind:disabled="atStart" {{ attributes.cn("absolute top-1/2 size-8 -translate-y-1/2 inline-flex cursor-pointer items-center justify-center rounded-full border bg-background shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 [&_svg]:size-4 -left-12") }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg><span class="sr-only">Previous slide</span></button>

components/ui/carousel_next.html

<button type="button" data-slot="carousel-next" x-on:click="go(1)" x-bind:disabled="atEnd" {{ attributes.cn("absolute top-1/2 size-8 -translate-y-1/2 inline-flex cursor-pointer items-center justify-center rounded-full border bg-background shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 [&_svg]:size-4 -right-12") }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg><span class="sr-only">Next slide</span></button>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <pb-ui.carousel> <pb-ui.carousel-content> <pb-ui.carousel-item> <pb-ui.carousel-previous> <pb-ui.carousel-next> sont disponibles dans tous vos templates.

<pb-ui.carousel class="w-full max-w-xs">
  <pb-ui.carousel-content>
    <pb-ui.carousel-item>Slide 1</pb-ui.carousel-item>
    <pb-ui.carousel-item>Slide 2</pb-ui.carousel-item>
  </pb-ui.carousel-content>
  <pb-ui.carousel-previous />
  <pb-ui.carousel-next />
</pb-ui.carousel>

Exemples

Plusieurs slides visibles

<pb-ui.carousel class="w-full max-w-sm">
  <pb-ui.carousel-content>
    @for(n in [1, 2, 3, 4, 5, 6])
    <pb-ui.carousel-item class="basis-1/3 p-1">
      <div class="flex aspect-square items-center justify-center rounded-xl border bg-card text-2xl font-semibold">{{ n }}</div>
    </pb-ui.carousel-item>
    @endfor
  </pb-ui.carousel-content>
  <pb-ui.carousel-previous />
  <pb-ui.carousel-next />
</pb-ui.carousel>

‹ Collapsible Dialog ›