How to create carousel with navbar in bootstrap 5?

Want to create an awesome carousel with a navbar on top? Here in this post, I will share how you can create a carousel with a navigation bar on top of that using bootstrap 5. So, let’s begin.

What is a carousel in bootstrap?

Have you ever used a slideshow on your device (Your smartphone or smart TV)? The slideshow shows images one after the other automatically. Now you might be thinking how is this slideshow related to the carousel. Because carousel does exactly the same and you can add controls to it. So, in simple words, the Carousel is a slideshow that cycles through elements.

Here’s the defintion from bootstrap site –

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Now let me show a screenshot of my browser window that contains a carousel with a navbar.

So our webpage will look like the image above.

Now let’s see the HTML.

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Watches</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <style>
        .carousel-item{height: 600px;}
    </style>
    
   </head>

   <body>
      <header>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
            <div class="container-fluid px-5">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbarToggler" aria-controls="myNavbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="myNavbarToggler">
                <a class="navbar-brand" href="#"><img src="logo.png" alt="logo" height="30" width="50"></a>
                <ul class="navbar-nav me-auto mb-2 mb-lg-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="#">Products</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

          <div id="mycarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#mycarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#mycarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#mycarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="Watch1.jpg" class="d-block w-100" alt="Watch1">
                <div class="carousel-caption d-none d-md-block">
                    <h1>Luxury Collection</h5>
                    <p>15% off on your first order</p>
                  </div>
              </div>
              <div class="carousel-item">
                <img src="Watch2.jpg" class="d-block w-100" alt="Watch2">
                <div class="carousel-caption d-none d-md-block">
                    <h1>Budget Collection</h5>
                    <p>25% off on your first order</p>
                  </div>
              </div>
              <div class="carousel-item">
                <img src="Watch3.jpg" class="d-block w-100" alt="Watch3">
                <div class="carousel-caption d-none d-md-block">
                    <h1>Premium Collection</h5>
                    <p>45% off on your first order</p>
                  </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#mycarousel" data-bs-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#mycarousel" data-bs-slide="next">
              <span class="carousel-control-next-icon"></span>
            </button>
          </div>
      </header>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

   </body>

</html>

Here, I have used <header> tag and inside the <header> tag I have used <nav> tag and a <div> for carousel and applied all the bootstrap classes needed. Don’t forget to apply the fixed-top class on the navbar. If you don’t do this, the navbar won’t appear on top of the carousel.

So, that’s the full code to create a carousel with a navbar using bootstrap 5.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: