Documentation v8.0.25

Preview Purchase

Overview

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

Custom Example

Add .carousel-customto use a customized carousel as shown below:
<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-bolder pe-2">Projects</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>

Explore Metronic

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single end product with paying users.
$ 939
Custom License
Reach us for custom license offers.
Buy Now

Metronic Demos

demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon
demo
Coming soon