Carousel

Basic With Controls

{% component "Carousel" indicators=False %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

With Indicators

{% component "Carousel" %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

With Captions

{% component "Carousel" %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
            {% component "CarouselCaption" %}
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            {% endcomponent %}
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
            {% component "CarouselCaption" %}
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            {% endcomponent %}
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
            {% component "CarouselCaption" %}
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            {% endcomponent %}
          {% endcomponent %}
        {% endcomponent %}

Preview:

Crossfade

{% component "Carousel" fade=True indicators=False %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

{% component "Carousel" ride="carousel" indicators=False %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

User Initiated Autoplay

{% component "Carousel" ride="true" indicators=False %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

Individual Item Intervals

{% component "Carousel" ride="carousel" indicators=False %}
          {% component "CarouselItem" active=True interval=10000 %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" interval=2000 %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

Slides Only No Controls

{% component "Carousel" ride="carousel" controls=False indicators=False %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

Disabled Touch Swiping

{% component "Carousel" touch=False indicators=False %}
          {% component "CarouselItem" active=True %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
          {% endcomponent %}
        {% endcomponent %}

Preview:

Dark Variant

{% component "Carousel" theme="dark" %}
          {% component "CarouselItem" active=True interval=10000 %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
            {% component "CarouselCaption" %}
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            {% endcomponent %}
          {% endcomponent %}
          {% component "CarouselItem" interval=2000 %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
            {% component "CarouselCaption" %}
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            {% endcomponent %}
          {% endcomponent %}
          {% component "CarouselItem" %}
            <img src="https://placehold.net/600x400.png" class="d-block w-100" alt="Slide">
            {% component "CarouselCaption" %}
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            {% endcomponent %}
          {% endcomponent %}
        {% endcomponent %}

Preview: