DocsComponentsCarousel

Carousel

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

Alpine.js5 files

<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

Install the dependencies
Alpine.js, loaded in your <head>.

Copy these files into your project

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>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.carousel> <pb-ui.carousel-content> <pb-ui.carousel-item> <pb-ui.carousel-previous> <pb-ui.carousel-next> are available in all your 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>

Examples

Several slides in view

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