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.
DeveloperXon 
Leave a Reply