Fade Hero Carousel

<div class="container-fluid p-0">
  <div id="fadeC" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-inner" style="height:520px">
      <div class="carousel-item active h-100" style="background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1600&h=900&fit=crop') center/cover">
        <div class="container h-100 d-flex align-items-center">
          <div class="text-white" style="max-width:600px">
            <h1 class="display-4 fw-bold">Build Faster</h1>
            <p class="lead">Production Bootstrap components, copy-paste ready.</p><a href="#" class="btn btn-primary btn-lg">Get Started</a>
          </div>
        </div>
      </div>
      <div class="carousel-item h-100" style="background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1600&h=900&fit=crop') center/cover">
        <div class="container h-100 d-flex align-items-center">
          <div class="text-white" style="max-width:600px">
            <h1 class="display-4 fw-bold">Learn Bangla</h1>
            <p class="lead">Step-by-step tutorials in your own language.</p><a href="#" class="btn btn-warning btn-lg">Watch Now</a>
          </div>
        </div>
      </div>
      <div class="carousel-item h-100" style="background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1600&h=900&fit=crop') center/cover">
        <div class="container h-100 d-flex align-items-center">
          <div class="text-white" style="max-width:600px">
            <h1 class="display-4 fw-bold">Join Community</h1>
            <p class="lead">10,000+ developers building together.</p><a href="#" class="btn btn-success btn-lg">Join Free</a>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" data-bs-target="#fadeC" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
    <button class="carousel-control-next" data-bs-target="#fadeC" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
  </div>
</div>