SutraUI.Carousel (Sutra UI v0.3.0)

View Source

A carousel component using scroll-snap for smooth navigation.

This carousel uses native CSS scroll-snap for smooth, performant scrolling. Indicators provide navigation and show current position.

Examples

<.carousel id="image-carousel">
  <:item>
    <img src="/images/slide1.jpg" alt="Slide 1" />
  </:item>
  <:item>
    <img src="/images/slide2.jpg" alt="Slide 2" />
  </:item>
  <:item>
    <img src="/images/slide3.jpg" alt="Slide 3" />
  </:item>
</.carousel>

<.carousel id="card-carousel" show_indicators={false} gap="1rem" loop>
  <:item>
    <div class="card">Card 1</div>
  </:item>
  <:item>
    <div class="card">Card 2</div>
  </:item>
</.carousel>

<.carousel id="sized-carousel" width="400px" height="300px">
  <:item>Slide 1</:item>
  <:item>Slide 2</:item>
</.carousel>

<.carousel id="product-carousel" item_class="w-full md:w-1/2 lg:w-1/3">
  <:item :for={product <- @products}>
    <.product_card product={product} />
  </:item>
</.carousel>

Accessibility

  • Uses semantic HTML structure with proper ARIA roles
  • aria-live="polite" announces slide changes to screen readers
  • Carousel items can be navigated via scroll
  • Indicators provide visual feedback for current position
  • Works with keyboard navigation (arrow keys when focused)
  • Each slide has aria-roledescription="slide" for clarity

Summary

Functions

carousel(assigns)

Renders a carousel component.

Functions

carousel(assigns)

Renders a carousel component.

Attributes

  • id (:string) (required) - Unique identifier for the carousel.
  • show_indicators (:boolean) - Whether to show navigation indicators. Defaults to true.
  • show_arrows (:boolean) - Whether to show prev/next arrow buttons. Defaults to true.
  • loop (:boolean) - Whether to loop back to first slide after last. Defaults to false.
  • item_class (:string) - Additional CSS classes for each carousel item. Defaults to nil.
  • gap (:string) - Gap between items (CSS value, e.g., '1rem', '16px'). Defaults to nil.
  • width (:string) - Width of the carousel (CSS value, e.g., '400px', '100%'). Defaults to nil.
  • height (:string) - Height of the carousel (CSS value, e.g., '300px', 'auto'). Defaults to nil.
  • class (:string) - Additional CSS classes for the carousel container. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • item (required) - Carousel items. Accepts attributes:
    • class (:string) - Additional CSS classes for this specific item.