Hey Guys, today we are going to learn How to Make a Bootstrap Carousel Slider with Thumbnails. If you’ve knowledge of Bootstrap, then you can easily understand that.
Otherwise, you need to know the basic knowledge of Bootstrap. So, I’m going to teach you How you can use Bootstrap to make a Bootstrap Carousel Slider with Thumbnails with source code.
What is a Bootstrap Carousel Slider?
A Bootstrap Carousel Slider is a feature that allows you to display multiple images in a slideshow format. This can be a great way to showcase products, and services, or even just highlight some of your favorite pictures.
Why Use a Bootstrap Carousel Slider?
There are many reasons to use a carousel slider on your website or blog. A carousel slider can be an excellent way to showcase products, services, or images. They can also be used to tell a story or create a visual narrative.
Bootstrap is a popular HTML, CSS, and JavaScript framework that makes it easy to create responsive websites and web applications. Bootstrap includes a number of components and options that make it easy to create beautiful, responsive carousel sliders.
One of the great things about using a Bootstrap carousel is that they are extremely easy to set up and customize. In this article, we will show you how to create a Bootstrap carousel slider with thumbnails. We will also provide some tips on how to get the most out of your carousel slider.
How to Create a Bootstrap Carousel Slider With Thumbnails
A bootstrap carousel slider with thumbnails can be a great way to display several images in a row, and can also be easily customized to display different sizes of thumbnails.
In this tutorial, we’ll show you how to create a bootstrap carousel slider with thumbnails, and how to customize it to display different thumbnail sizes.
Bootstrap 5 Carousel with thumbnails
In this tutorial, I’ve used Bootstrap 5 to create Carousel Slider with Thumbnails, you need to use the same version to display the slider properly. If you have the previous version please read the complete article, I’ve mentioned below Bootstrap 4 code.
<!-- Bootstrap 5 Code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Image Slider Carousel With Thumbas</title>
</head>
<body>
<!-- Carousel Start -->
<div id="carouselsliderdemo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/img2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/img3.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/img5.jpg" class="d-block w-100">
</div>
</div>
</div>
<!-- Carousel Close -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>Once used the above-mentioned code, then you will be able to see the images appearing on the page, and also the image will move automatically.
Then the next thing you need to indicators, inside the Indicator code you need to add images. I’ve mentioned the code below you can check it.
<!-- Indicator start -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselsliderdemo" class="active img-thumbnail"
data-bs-slide-to="0">
<img src="img/indicator-img/img2.jpg" alt="" class="d-block w-100">
</button>
<button type="button" data-bs-target="#carouselsliderdemo" class="img-thumbnail" data-bs-slide-to="1">
<img src="img/indicator-img/img3.jpg" alt="" class="d-block w-100">
</button>
<button type="button" data-bs-target="#carouselsliderdemo" class="img-thumbnail" data-bs-slide-to="2">
<img src="img/indicator-img/img5.jpg" alt="" class="d-block w-100">
</button>
</div>
<!-- Indicator Close -->Once you add the above-mentioned code inside the index.html, then your image slider is working fine, but you need to modify some CSS classes. You can check the output after adding the above-mentioned code.
Once you do that, then the final step you need to modify Bootstrap classes using CSS. So, I’ve mentioned below some modifications you need to add to your index.html file.
<style>
body {
background: #ccc;
}
.carousel-indicators {
margin-bottom: 70px;
}
.carousel-indicators button[data-bs-target] {
width: 200px;
}
</style>
Finally, code you can check below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Image Slider Carousel With Thumbas</title>
<style>
body {
background: #ccc;
}
.carousel-indicators {
margin-bottom: 70px;
}
.carousel-indicators button[data-bs-target] {
width: 200px;
}
</style>
</head>
<body>
<!-- Carousel Start -->
<div id="carouselsliderdemo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/img2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/img3.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/img5.jpg" class="d-block w-100">
</div>
</div>
<!-- Indicator start -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselsliderdemo" class="active img-thumbnail"
data-bs-slide-to="0">
<img src="img/indicator-img/img2.jpg" alt="" class="d-block w-100">
</button>
<button type="button" data-bs-target="#carouselsliderdemo" class="img-thumbnail" data-bs-slide-to="1">
<img src="img/indicator-img/img3.jpg" alt="" class="d-block w-100">
</button>
<button type="button" data-bs-target="#carouselsliderdemo" class="img-thumbnail" data-bs-slide-to="2">
<img src="img/indicator-img/img5.jpg" alt="" class="d-block w-100">
</button>
</div>
<!-- Indicator Close -->
</div>
<!-- Carousel Close -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>You can watch the video tutorial, which helps you to understand everything from scratch.
Bootstrap Multiple Image Slider With Thumbnail
Inside the video tutorial, you will learn Bootstrap Multiple Image Slider with Thumbnail. Inside the Project have Bootstrap 5 usage. So, If you’ve previously you need to use the latest version of Bootstrap 5.
Carousel with thumbnails Bootstrap 4
Guys, I have a video tutorial above, you need to watch it. Inside the video have Bootstrap 5, but you need to remove the bs text from Bootstrap classes. I’m going to share with complete code with Bootstrap 4 CSS and JS Files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Image Slider Carousel With Thumbas</title>
<style>
body {
background: #ccc;
}
.carousel-indicators {
margin-bottom: -70px;
static;
}
.carousel-indicators button[data-target] {
width: 200px;
}
</style>
</head>
<body>
<!-- Carousel Start -->
<div id="carouselsliderdemo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/img2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/img3.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="img/img5.jpg" class="d-block w-100">
</div>
</div>
<!-- Indicator start -->
<div class="carousel-indicators">
<button type="button" data-target="#carouselsliderdemo" class="active img-thumbnail"
data-slide-to="0">
<img src="img/indicator-img/img2.jpg" alt="" class="d-block w-100">
</button>
<button type="button" data-target="#carouselsliderdemo" class="img-thumbnail" data-slide-to="1">
<img src="img/indicator-img/img3.jpg" alt="" class="d-block w-100">
</button>
<button type="button" data-target="#carouselsliderdemo" class="img-thumbnail" data-slide-to="2">
<img src="img/indicator-img/img5.jpg" alt="" class="d-block w-100">
</button>
</div>
<!-- Indicator Close -->
</div>
<!-- Carousel Close -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel();
</script>
</body>
</html>Conclusion
A bootstrap carousel slider with thumbnails can be a great way to showcase products or services. By using the thumbnail feature, you can make it easier for visitors to find what they’re looking for and click on the images that interest them most.
You May Also Like:
With a little bit of code, you can easily create your own bootstrap carousel slider with thumbnails.
