Carousel

How it works

A slideshow component for cycling through elements—images or slides of text—like a carousel. The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Basic example

Here's a basic carousel with slides only. The images has by default the class .d-block and .w-100 on carousel images to prevent browser default image alignment.

<x-carousel id="BasicExample">
    <x-carousel.item src="https://picsum.photos/id/0/600/250" active/>
    <x-carousel.item src="https://picsum.photos/id/1/600/250"/>
    <x-carousel.item src="https://picsum.photos/id/2/600/250"/>
</x-carousel>
<div id="BasicExample"
     data-bs-ride="carousel"
     class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/0/600/250"
           class="d-block w-100"
           alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/1/600/250"
           class="d-block w-100"
           alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/2/600/250"
           class="d-block w-100"
           alt="">
    </div>
  </div>
</div>

Example with props

Here's a the complete carousel example by using props indicators="3", interval="5000", controls, crossfade and dark.

<x-carousel id="PropsExample" indicators="3" interval="5000" controls crossfade dark>
  <x-carousel.item src="https://picsum.photos/id/10/600/250" active/>
  <x-carousel.item src="https://picsum.photos/id/100/600/250"/>
  <x-carousel.item src="https://picsum.photos/id/1000/600/250"/>
</x-carousel>
<div id="PropsExample"
     data-bs-ride="carousel"
     data-bs-interval="5000"
     class="carousel slide carousel-fade carousel-dark">
  <div class="carousel-indicators">
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/10/600/250"
           class="d-block w-100"
           alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/100/600/250"
           class="d-block w-100"
           alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/1000/600/250"
           class="d-block w-100"
           alt="">
    </div>
  </div>
  <button class="carousel-control-prev"
       type="button"
       data-bs-target="#PropsExample"
       data-bs-slide="prev"> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next"
       type="button"
       data-bs-target="#PropsExample"
       data-bs-slide="next"> <span class="visually-hidden">Next</span></button>
</div>

Disable touch swiping

Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the prop :touch="false". The example below also does not include the data-bs-ride attribute because has :interval="false" so it doesn't autoplay.

<x-carousel id="DisableTouchExample" :touch="false" :interval="false" controls>
    <x-carousel.item src="https://picsum.photos/id/0/600/250" active/>
    <x-carousel.item src="https://picsum.photos/id/1/600/250"/>
    <x-carousel.item src="https://picsum.photos/id/2/600/250"/>
</x-carousel>
<div id="DisableTouchExample"
     data-bs-touch="false"
     data-bs-interval="false"
     class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/0/600/250"
           class="d-block w-100"
           alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/1/600/250"
           class="d-block w-100"
           alt="">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/2/600/250"
           class="d-block w-100"
           alt="">
    </div>
  </div>
  <button class="carousel-control-prev"
       type="button"
       data-bs-target="#DisableTouchExample"
       data-bs-slide="prev"> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next"
       type="button"
       data-bs-target="#DisableTouchExample"
       data-bs-slide="next"> <span class="visually-hidden">Next</span></button>
</div>

Caption example

It's easy to add caption to your carousel. By default caption are only visible from md breakpoint. If you need to change this then use slots as shown below.

<x-carousel id="CaptionExample" :touch="false" :interval="false" controls>
    <x-carousel.item src="https://picsum.photos/id/1022/600/250" active>
        <x-slot name="caption" class="d-none d-md-block">
            <h4>My first slide caption via slot</h4>
            <p>This caption is set via slot "caption".</p>
        </x-slot>
    </x-carousel.item>
    <x-carousel.item src="https://picsum.photos/id/1022/600/250">
        <x-slot name="caption" class="d-none d-md-block">
            <h4>Another caption via slot</h4>
            <p>This is caption set via slot "caption".</p>
        </x-slot>
    </x-carousel.item>
    <x-carousel.item src="https://picsum.photos/id/122/600/250" caption="My simple caption via prop"/>
</x-carousel>
<div id="CaptionExample"
     data-bs-touch="false"
     data-bs-interval="false"
     class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/1022/600/250"
           class="d-block w-100"
           alt="">
      <div class="carousel-caption d-none d-md-block">
        <h4>
          My first slide caption via slot
        </h4>

        <p>
          This caption is set via slot "caption".
        </p>
      </div>
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/1022/600/250"
           class="d-block w-100"
           alt="">
      <div class="carousel-caption d-none d-md-block">
        <h4>
          Another caption via slot
        </h4>

        <p>
          This is caption set via slot "caption".
        </p>
      </div>
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/122/600/250"
           class="d-block w-100"
           alt="">
      <div class="carousel-caption d-none d-md-block">
        <h4>
          My simple caption via prop
        </h4>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev"
       type="button"
       data-bs-target="#CaptionExample"
       data-bs-slide="prev"> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next"
       type="button"
       data-bs-target="#CaptionExample"
       data-bs-slide="next"> <span class="visually-hidden">Next</span></button>
</div>

Using slots example

If you need more customization of content you can use add content directly in x-carousel.item content.

<x-carousel id="SlotExample">
    <x-carousel.item active>
        <img src="https://picsum.photos/id/0/600/250" class="d-block w-100" alt="My awesome image">
    </x-carousel.item>
    <x-carousel.item>
        <img src="https://picsum.photos/id/1/600/250" class="d-block w-100" alt="My awesome image">
    </x-carousel.item>
    <x-carousel.item>
        <img src="https://picsum.photos/id/2/600/250" class="d-block w-100" alt="My awesome image">
    </x-carousel.item>
</x-carousel>
<div id="SlotExample"
     data-bs-ride="carousel"
     class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/0/600/250"
           class="d-block w-100"
           alt="My awesome image">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/1/600/250"
           class="d-block w-100"
           alt="My awesome image">
    </div>

    <div class="carousel-item">
      <img src="https://picsum.photos/id/2/600/250"
           class="d-block w-100"
           alt="My awesome image">
    </div>
  </div>
</div>