Carousel

Basic With Controls

<c-bs-carousel c-indicators="False">
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

With Indicators

<c-bs-carousel>
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

With Captions

<c-bs-carousel>
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
    <c-bs-carousel-caption>
      <h5>First slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
    </c-bs-carousel-caption>
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
    <c-bs-carousel-caption>
      <h5>Second slide label</h5>
      <p>Some representative placeholder content for the second slide.</p>
    </c-bs-carousel-caption>
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
    <c-bs-carousel-caption>
      <h5>Third slide label</h5>
      <p>Some representative placeholder content for the third slide.</p>
    </c-bs-carousel-caption>
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

Crossfade

<c-bs-carousel c-fade="True" c-indicators="False">
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

<c-bs-carousel ride="carousel" c-indicators="False">
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

User Initiated Autoplay

<c-bs-carousel ride="true" c-indicators="False">
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

Individual Item Intervals

<c-bs-carousel ride="carousel" c-indicators="False">
  <c-bs-carousel-item c-active="True" c-interval="10000">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item c-interval="2000">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

Slides Only No Controls

<c-bs-carousel ride="carousel" c-controls="False" c-indicators="False">
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

Disabled Touch Swiping

<c-bs-carousel c-touch="False" c-indicators="False">
  <c-bs-carousel-item c-active="True">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
  </c-bs-carousel-item>
</c-bs-carousel>

Preview:

Dark Variant

<c-bs-carousel theme="dark">
  <c-bs-carousel-item c-active="True" c-interval="10000">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
    <c-bs-carousel-caption>
      <h5>First slide label</h5>
      <p>Some representative placeholder content for the first slide.</p>
    </c-bs-carousel-caption>
  </c-bs-carousel-item>
  <c-bs-carousel-item c-interval="2000">
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
    <c-bs-carousel-caption>
      <h5>Second slide label</h5>
      <p>Some representative placeholder content for the second slide.</p>
    </c-bs-carousel-caption>
  </c-bs-carousel-item>
  <c-bs-carousel-item>
    <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide" />
    <c-bs-carousel-caption>
      <h5>Third slide label</h5>
      <p>Some representative placeholder content for the third slide.</p>
    </c-bs-carousel-caption>
  </c-bs-carousel-item>
</c-bs-carousel>

Preview: