Web Designer Wall

Snippets Image

Bootstrap 5 Image Slider with Transparent Navbar

A rounded hero carousel with fading photo slides, captions with a call to action, and a transparent navbar that turns solid once the content inside the frame is scrolled.

Bootstrap 5 Bootstrap 6 No jQuery Jul 2020 6.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1100px">
    <div class="hs wdw-card overflow-hidden" id="hsFrame">
      <nav class="navbar navbar-expand-md navbar-dark hs-nav" id="hsNav" aria-label="Main">
        <div class="container-fluid px-3 px-md-4">
          <a class="navbar-brand fw-bold" href="#">BRANDNAME</a>
          <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#hsLinks" aria-controls="hsLinks" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="hsLinks">
            <ul class="navbar-nav ms-md-auto gap-md-1 py-2 py-md-0">
              <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#">About</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="hs-scroll" id="hsScroll">
      <div id="hsCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" aria-label="Featured slides">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#hsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#hsCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#hsCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active" data-bs-interval="5000">
            <div class="hs-slide" style="background-image:url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1350&q=80')" role="img" aria-label="Crafted with care"></div>
            <div class="carousel-caption text-start hs-cap"><h2 class="display-5 fw-bold">Crafted with care</h2><p class="lead mb-0">Thoughtful design that grows with your brand.</p><a class="btn btn-light rounded-pill px-4 mt-3" href="#">Get started</a></div>
          </div>
          <div class="carousel-item" data-bs-interval="5000">
            <div class="hs-slide" style="background-image:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1350&q=80')" role="img" aria-label="Built to be seen"></div>
            <div class="carousel-caption text-start hs-cap"><h2 class="display-5 fw-bold">Built to be seen</h2><p class="lead mb-0">Fast, accessible sites that look sharp on every screen.</p><a class="btn btn-light rounded-pill px-4 mt-3" href="#">Get started</a></div>
          </div>
          <div class="carousel-item" data-bs-interval="5000">
            <div class="hs-slide" style="background-image:url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1350&q=80')" role="img" aria-label="Ready when you are"></div>
            <div class="carousel-caption text-start hs-cap"><h2 class="display-5 fw-bold">Ready when you are</h2><p class="lead mb-0">Start a project today and launch in weeks, not months.</p><a class="btn btn-light rounded-pill px-4 mt-3" href="#">Get started</a></div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#hsCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button>
        <button class="carousel-control-next" type="button" data-bs-target="#hsCarousel" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button>
      </div>
      <div class="hs-more p-4 p-md-5">
        <span class="wdw-eyebrow">What we do</span>
        <h2 class="h4 wdw-heading mb-2">Everything below the hero</h2>
        <p class="wdw-muted mb-0">Scroll inside this frame: the navbar starts transparent over the photo and turns solid once you leave the top.</p>
      </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More image snippets