Carousel

Este conteúdo não está disponível em sua língua ainda.

The Carousel component allows you to display a slideshow of images or content panels with navigation controls and optional autoplay.
It is perfect for galleries, featured content, or interactive UI sections.

Multiple items: Display images, text, or custom content in slides.
Navigation controls: Buttons or indicators to move between slides.
Autoplay support: Automatically cycle through slides.
Custom actions: Slots for custom previous/next buttons or indicators.
Responsive design: Works with any container size.

0

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident soluta vero est minima, non illo ipsam molestiae omnis laborum, debitis, harum velit earum quam aperiam reiciendis sit consectetur ex? Iste.

1

2

3

4

0

1

2

3

4

0

1

2

3

4

<script lang="ts">
  import { Button, Card, Carousel, RadioButton } from "@fefade-ui/svelte"

  let currentIndex = $state(0)
</script>

<Carousel id="carousel-1" auto>
  <Carousel.Item>
    <img
      style="object-fit:contain;width:100%;height:100%;"
      src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg"
      alt="Tree at sunset"
    />
  </Carousel.Item>
  <Carousel.Item>
    <img
      style="object-fit:contain;width:100%;height:100%;"
      src="https://gratisography.com/wp-content/uploads/2025/01/gratisography-dog-vacation-800x525.jpg"
      alt="dog"
    />
  </Carousel.Item>

  {#snippet actions({ prev, next, index, length })}
    <div
      style="
      display: flex;
      justify-content: space-between;
      position: absolute;
      left: 5px;
      right: 5px;
      top: 50%;
      transform: translate(0, -50%);
            align-items: baseline;
      "
    >
      <Button disabled={index === 0} roundedFull onclick={prev}>prev</Button>
      <Button disabled={index === length} roundedFull onclick={next}>
        next
      </Button>
    </div>
  {/snippet}
</Carousel>

<Card>
  <Carousel id="carousel-2" style="padding: 3rem 0;">
    {#each Array.from(Array(5)) as _, index (index)}
      <Carousel.Item href="/">
        <h1 style="text-align: center;">
          {index}
        </h1>
        <br />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
          soluta vero est minima, non illo ipsam molestiae omnis laborum,
          debitis, harum velit earum quam aperiam reiciendis sit consectetur ex?
          Iste.
        </p>
      </Carousel.Item>
    {/each}

    {#snippet actions({ prev, next, index, length })}
      <div
        style="
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        right: 0;
        top: 5px;
        padding: 0 1rem;
                align-items: baseline;
      "
      >
        <Button onclick={prev}>prev</Button>
        <Button onclick={next}>{index} / {length} next</Button>
      </div>
    {/snippet}
  </Carousel>
</Card>

<Card>
  <Carousel id="carousel-3" style="padding: 3rem 0;">
    {#each Array.from(Array(5)) as _, index (index)}
      <Carousel.Item>
        <h1 style="text-align: center;">
          {index}
        </h1>
        <br />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
          soluta vero est minima, non illo ipsam molestiae omnis laborum,
          debitis, harum velit earum quam aperiam reiciendis sit consectetur ex?
          Iste.
        </p>
      </Carousel.Item>
    {/each}

    {#snippet actions({ prev, next })}
      <div
        style="
        display: flex;
        justify-content: flex-end;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
        padding: 0 1rem;
        gap: 1rem;
                align-items: baseline;
      "
      >
        <Button roundedFull onclick={prev}>prev</Button>
        <Button roundedFull onclick={next}>next</Button>
      </div>
    {/snippet}
  </Carousel>
</Card>

<Card>
  <Carousel id="carousel-4" style="padding: 3rem 0;">
    {#each Array.from(Array(5)) as _, index (index)}
      <Carousel.Item>
        <h1 style="text-align: center;">
          {index}
        </h1>
        <br />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
          soluta vero est minima, non illo ipsam molestiae omnis laborum,
          debitis, harum velit earum quam aperiam reiciendis sit consectetur ex?
          Iste.
        </p>
      </Carousel.Item>
    {/each}

    {#snippet actions({ goTo })}
      <div
        style="
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
        padding: 0 1rem;
        gap: 1rem;
                align-items: baseline;
      "
      >
        {#each Array.from(Array(5)) as _, index (index)}
          <RadioButton
            size="xs"
            checked={currentIndex === index}
            onchange={() => {
              currentIndex = index
              goTo(currentIndex)
            }}
          />
        {/each}
      </div>
    {/snippet}
  </Carousel>
</Card>

<style>
  img {
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  img:hover {
    transform: scale(1.05);
    opacity: 0.7;
  }
</style>

Props

Prop	Type	Default	Description
`id`	string	`""`	Unique identifier for the carousel instance.
`auto`	boolean	`false`	Enables automatic cycling through slides.
`href`	string	`undefined`	Optional link for slides that navigate to a URL.
`Carousel.Item`	slot/component	Required	Individual slide content, can include images, text, or custom elements.
`actions`	slot/function	Optional	Custom navigation controls (prev/next buttons, indicators).

Best Practices

Use alt attributes for images to improve accessibility and SEO.
Keep slides concise and visually clear for user engagement.
Use autoplay carefully, especially on mobile, to avoid overwhelming users.
Ensure navigation controls are visible and intuitive.
Combine with Cards or other layout components for rich content presentations.