Carousel Images and content are not displaying - carousel

Question

I have replicate this code to get 2 column structure in which left side is image carousel and right side is some text, I got the text right but the carousel is not displaying, I am using bootstrap-5 and have linked correct bootstrap css and js, that's verified:
Here is my code:
<section class="tech-area analytics-area" id="analytics-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel goes here -->
<div id="feature-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner active">
<div class="carousel-item">
<!-- first image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img1">
</div>
<div class="carousel-item">
<!-- second image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img2">
</div>
<div class="carousel-item">
<!-- third image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img3">
</div>
<div class="carousel-item">
<!-- fourth image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img4">
</div>
</div>
</div>
</div>
<div class="col">
<!-- Right side text goes here -->
<h1>Best UI UX design with analytical dashboard and more…</h1>
<p>Template provide best designed and user experienced home page and analytical dashboard. Gives
rich feeling and easy use elements action available with different interface design.</p>
<ul>
<li>Menu push content and overlay menu also full screen menu provided.</li>
<li>Sticky Footer iconic footer menu and informative footer for inner page</li>
<li>Dark mode with Different color selection to match your brand and stay with trend.</li>
<li>Customer will get Framework choice with same design to build app.</li>
<li>We have built template with responsive layout grid , It gives small to large phone devices
and UI support back to tablet devices also.</li>
<li>Standard grid systems are easy to customize as per need which adds flexibility components
designs.</li>
</ul>
</div>
</div>
</div>
</section>

Answer 1

You added the active class in the wrong element. Instead of the carousel-inside element, the active class must be used to mark one of the carousel-item elements as the initial active one:
<section class="tech-area analytics-area" id="analytics-section">
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel goes here -->
<div id="feature-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#feature-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- first image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img1">
</div>
<div class="carousel-item">
<!-- second image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img2">
</div>
<div class="carousel-item">
<!-- third image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img3">
</div>
<div class="carousel-item">
<!-- fourth image -->
<img class="d-block w-100" src="assets/images/FiMobile-1-300x400.png" alt="slider-img4">
</div>
</div>
</div>
</div>
<div class="col">
<!-- Right side text goes here -->
<h1>Best UI UX design with analytical dashboard and more…</h1>
<p>Template provide best designed and user experienced home page and analytical dashboard. Gives
rich feeling and easy use elements action available with different interface design.</p>
<ul>
<li>Menu push content and overlay menu also full screen menu provided.</li>
<li>Sticky Footer iconic footer menu and informative footer for inner page</li>
<li>Dark mode with Different color selection to match your brand and stay with trend.</li>
<li>Customer will get Framework choice with same design to build app.</li>
<li>We have built template with responsive layout grid , It gives small to large phone devices
and UI support back to tablet devices also.</li>
<li>Standard grid systems are easy to customize as per need which adds flexibility components
designs.</li>
</ul>
</div>
</div>
</div>
</section>