src/sass/_variables.scss
and adds additonal options in
src/sass/_carousel.scss
..carousel-custom
to 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>