Carousel

A horizontal scroll-snap carousel with previous/next controls, powered by the ShadixCarousel hook.

<.carousel></.carousel>

Examples

Basic

Five slides with previous and next controls.

<div class="px-12">
  <.carousel id="basic-carousel" class="w-full max-w-xs mx-auto">
    <.carousel_content>
      <.carousel_item>
        <div class="flex aspect-square items-center justify-center rounded-lg border bg-card p-6">
          <span class="text-4xl font-semibold">1</span>
        </div>
      </.carousel_item>
      <.carousel_item>
        <div class="flex aspect-square items-center justify-center rounded-lg border bg-card p-6">
          <span class="text-4xl font-semibold">2</span>
        </div>
      </.carousel_item>
      <.carousel_item>
        <div class="flex aspect-square items-center justify-center rounded-lg border bg-card p-6">
          <span class="text-4xl font-semibold">3</span>
        </div>
      </.carousel_item>
      <.carousel_item>
        <div class="flex aspect-square items-center justify-center rounded-lg border bg-card p-6">
          <span class="text-4xl font-semibold">4</span>
        </div>
      </.carousel_item>
      <.carousel_item>
        <div class="flex aspect-square items-center justify-center rounded-lg border bg-card p-6">
          <span class="text-4xl font-semibold">5</span>
        </div>
      </.carousel_item>
    </.carousel_content>
    <.carousel_previous />
    <.carousel_next />
  </.carousel>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
id	:string
rest	:global
inner_block (slot)	:slot