Documentation v8.2.5

Downloads Preview

Overview

Metronic customizes the Bootstrap Carousel  through the SASS variables in src/sass/components/_variables.scssand adds additonal options in src/sass/components/_carousel.scss.

Dots Indicators

Add .carousel-customand .carousel-indicators-dotsclasses for a custom carousel with dots indicators style:
<div id="kt_carousel_1_carousel" class="carousel carousel-custom slide" data-bs-ride="carousel" data-bs-interval="8000">
    <!--begin::Heading-->
    <div class="d-flex align-items-center justify-content-between flex-wrap">
        <!--begin::Label-->
        <span class="fs-4 fw-bold pe-2">Title</span>
        <!--end::Label-->

        <!--begin::Carousel Indicators-->
        <ol class="p-0 m-0 carousel-indicators carousel-indicators-dots">
            <li data-bs-target="#kt_carousel_1_carousel" data-bs-slide-to="0" class="ms-1 active"></li>
            <li data-bs-target="#kt_carousel_1_carousel" data-bs-slide-to="1" class="ms-1"></li>
            <li data-bs-target="#kt_carousel_1_carousel" data-bs-slide-to="2" class="ms-1"></li>
        </ol>
        <!--end::Carousel Indicators-->
    </div>
    <!--end::Heading-->

    <!--begin::Carousel-->
    <div class="carousel-inner pt-8">
        <!--begin::Item-->
        <div class="carousel-item active">
            ...
        </div>
        <!--end::Item-->

        <!--begin::Item-->
        <div class="carousel-item">
            ...
        </div>
        <!--end::Item-->

        <!--begin::Item-->
        <div class="carousel-item">
            ...
        </div>
        <!--end::Item-->
    </div>
    <!--end::Carousel-->
</div>

Bullet Indicators

Add .carousel-customand .carousel-indicators-bulletclasses for a custom carousel with bullet indicators style:
<div id="kt_carousel_2_carousel" class="carousel carousel-custom slide" data-bs-ride="carousel" data-bs-interval="8000">
    <!--begin::Heading-->
    <div class="d-flex align-items-center justify-content-between flex-wrap">
        <!--begin::Label-->
        <span class="fs-4 fw-bold pe-2">Title</span>
        <!--end::Label-->

        <!--begin::Carousel Indicators-->
        <ol class="p-0 m-0 carousel-indicators carousel-indicators-bullet">
            <li data-bs-target="#kt_carousel_2_carousel" data-bs-slide-to="0" class="ms-1 active"></li>
            <li data-bs-target="#kt_carousel_2_carousel" data-bs-slide-to="1" class="ms-1"></li>
            <li data-bs-target="#kt_carousel_2_carousel" data-bs-slide-to="2" class="ms-1"></li>
        </ol>
        <!--end::Carousel Indicators-->
    </div>
    <!--end::Heading-->

    <!--begin::Carousel-->
    <div class="carousel-inner pt-8">
        <!--begin::Item-->
        <div class="carousel-item active">
            ...
        </div>
        <!--end::Item-->

        <!--begin::Item-->
        <div class="carousel-item">
            ...
        </div>
        <!--end::Item-->

        <!--begin::Item-->
        <div class="carousel-item">
            ...
        </div>
        <!--end::Item-->
    </div>
    <!--end::Carousel-->
</div>

Theme Colors

Add .carousel-customand carousel-indicators-active-{color}where coloraccepts one of Theme Colors to apply a color to the indicator's active state.
<div id="kt_carousel_3_carousel" class="carousel carousel-custom slide" data-bs-ride="carousel" data-bs-interval="8000">
    <!--begin::Heading-->
    <div class="d-flex align-items-center justify-content-between flex-wrap">
        <!--begin::Label-->
        <span class="fs-4 fw-bold pe-2">Title</span>
        <!--end::Label-->

        <!--begin::Carousel Indicators-->
        <ol class="p-0 m-0 carousel-indicators carousel-indicators-bullet carousel-indicators-active-primary">
            <li data-bs-target="#kt_carousel_3_carousel" data-bs-slide-to="0" class="ms-1 active"></li>
            <li data-bs-target="#kt_carousel_3_carousel" data-bs-slide-to="1" class="ms-1"></li>
            <li data-bs-target="#kt_carousel_3_carousel" data-bs-slide-to="2" class="ms-1"></li>
        </ol>
        <!--end::Carousel Indicators-->
    </div>
    <!--end::Heading-->

    <!--begin::Carousel-->
    <div class="carousel-inner pt-8">
        <!--begin::Item-->
        <div class="carousel-item active">
            ...
        </div>
        <!--end::Item-->

        <!--begin::Item-->
        <div class="carousel-item">
            ...
        </div>
        <!--end::Item-->

        <!--begin::Item-->
        <div class="carousel-item">
            ...
        </div>
        <!--end::Item-->
    </div>
    <!--end::Carousel-->
</div>