Bootstrap 5 Carousel with Thumbnails

Hello friends. Today I will share with you another snippet of Bootstrap 5. Today we will customize the Bootstrap 5 carousel and make a slider where the image will be as a carousel indicator. I request you to take a look at the video tutorial below. This video will help you to understand the code. We've shared over 1000 front-end development-related videos on our YouTube channel. If you are new to this front-end, subscribe to our channel.

I hope you enjoyed the video tutorial and understand how the slider has been created by modifying the Carousel snippet of Bootstrap 5. The homepage is the main door of a website. If we search by typing the URL in the address bar of the web browser, we will first see the homepage of a website. So it is very important to make the homepage interesting. Because it gives visitors a better first impression and they are more interested in exploring the website.

To create this project, we first took the navbar snippet of Bootstrap 5. From this snippet, we kept the nav-items we need and left out the rest like dropdown menus, forms, etc. I have added the 'ms-auto' class to move the menu items to the right. Follow the video above to know the details. After the navbar implementation is over, we will bring the Carousel snippet of Bootstrap 5 and paste it into our project.

You must have noticed in the video that I used the background image in the slider. This means that by deleting the image section in the bootstrap carousel, I have added a class to each carousel item. I have used different background images in these classes. Apart from that, I have used images inside the buttons of the carousel indicator. All Images must match the slider image. You can determine the size of these thumbnails. In this project, I have taken the width of thumbnails as 100px. You can understand the style given in the whole project by watching the video. So I'm not going to go into further detail.

You may also Like:

Bootstrap 5 Carousel with Thumbnails [ Source Code ]:

To create this project, you first need to create two files. One of them is an HTML file and, the other is a CSS file. Make sure the file extensions of each file are correct. Then add Bootstrap 5's CSS and js library to your project. For this project, I have used the online CDN version. Integrate the fonts of your choice from Google Fonts into this project. Finally, copy and paste the following code into your project. If you having trouble with the code below, you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 5 Carousel Slider With Thumbnail</title>
	<link href="https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light fixed-top">
		<div class="container">
			<a class="navbar-brand" href="#"><span class="text-warning">Trip</span>vise</a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link" 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="#">Destinations</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contact</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="carousel slide" data-bs-ride="carousel" id="carouselExampleCaptions">
		<div class="carousel-inner">
			<div class="carousel-item active bg-1">
				<div class="carousel-caption">
					<h5>Best In <span class="text-warning">Tourism</span></h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, culpa.</p><a class="bg-warning text-white" href="#">Learn More</a>
				</div>
			</div>
			<div class="carousel-item bg-2">
				<div class="carousel-caption">
					<h5>Worldwide <span class="text-warning">Recognition</span></h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, culpa.</p><a class="bg-warning text-white" href="#">Learn More</a>
				</div>
			</div>
			<div class="carousel-item bg-3">
				<div class="carousel-caption">
					<h5>Effordable <span class="text-warning">Budget</span></h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, culpa.</p><a class="bg-warning text-white" href="#">Learn More</a>
				</div>
			</div>
		</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleCaptions" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleCaptions" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button> <!--thumbnails-->
		<div class="carousel-indicators">
			<button aria-label="Slide 1" class="active" data-bs-slide-to="0" data-bs-target="#carouselExampleCaptions" type="button"><img class="img-fluid" src="img/1.jpg"></button> <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carouselExampleCaptions" type="button"><img class="img-fluid" src="img/2.jpg"></button> <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carouselExampleCaptions" type="button"><img class="img-fluid" src="img/3.jpg"></button>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
	</script>
</body>
</html>

ADD CSS:

body {
	font-family: montserrat;
}
.navbar-nav a {
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 700;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.navbar-light .navbar-brand {
	color: #fff;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
	color: #fff;
}
.navbar-light .navbar-nav .nav-link {
	color: #fff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: yellow;
}
.navbar-toggler {
	padding: 1px 5px;
	font-size: 18px;
	line-height: 0.3;
	background: #fff;
}
/*  carousel      */

.carousel-item {
	height: 100vh;
	min-height: 300px;
}
.bg-1 {
	background-image: url(img/1.jpg);
}
.bg-2 {
	background-image: url(img/2.jpg);
}
.bg-3 {
	background-image: url(img/3.jpg);
}
.bg-1, .bg-2, .bg-3 {
	-webkit-background-size: cover;
	background-size: cover;
}
.carousel-caption {
	bottom: 220px;
	z-index: 2;
}
.carousel-caption h5 {
	font-size: 85px;
	text-transform: capitalize;
	letter-spacing: 2px;
	margin-top: 25px;
	font-family: 'Moon Dance', cursive;
}
.carousel-caption p {
	width: 60%;
	margin: auto;
	font-size: 18px;
	line-height: 1.9;
}
.carousel-caption a {
	text-transform: uppercase;
	text-decoration: none;
	padding: 5px 20px;
	display: inline-block;
	color: #fff;
	margin-top: 15px;
	border-radius: 5px;
}
.carousel-inner:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
}
.carousel-indicators {
	bottom: 65px;
}
.carousel-indicators button {
	width: 100px !important;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.navbar-nav {
		text-align: center;
	}
	.navbar-collapse {
		background: #fff;
	}
	.navbar-collapse .nav-item .nav-link {
		color: #000;
	}
	.carousel-caption {
		bottom: 350px;
	}
	.carousel-caption h5 {
		font-size: 65px;
	}
	.carousel-caption p {
		font-size: 18px;
		width: 100%;
	}
}
@media only screen and (max-width: 767px) {
	.navbar-nav {
		text-align: center;
	}
	.navbar-collapse .nav-item .nav-link {
		color: #000;
	}
	.carousel-caption {
		bottom: 165px;
	}
	.carousel-caption h5 {
		font-size: 25px;
	}
	.carousel-caption p {
		font-size: 12px;
		width: 100%;
	}
	.carousel-caption a {
		padding: 10px 15px;
		font-size: 15px;
	}
	.navbar-collapse {
		background: #fff;
	}
}

I hope you have implemented the code properly. We hope you like the code. This is the kind of snippet we often share on this website. So follow us on our social media profiles to stay connected with us. Please share our blog articles with people you know. Learn for yourself and help others learn. Thank you for visiting our blog.

DOWNLOAD CODE

Bootstrap 5 Carousel with Thumbnails [ Source Code ]:

1 Comments

Post a Comment

About Us

Contact Form

Bootstrap 5 Carousel with Thumbnails

Bootstrap 5 Carousel with Thumbnails [ Source Code ]:

You might like

1 Comments

Post a Comment

Contact Form