How to Create a Carousel in Bootstrap ?
Last Updated :
05 Apr, 2024
Carousels are commonly used to showcase multiple images or content dynamically and interactively. It provides a convenient way to implement carousels with built-in functionality and styles.
Approach:
- Create an HTML document with Bootstrap 5 library classes for styling.
- Create a container with a centered heading, followed by a responsive carousel containing multiple slides with associated images.
- Create Navigation controls (previous and next) to navigate through the carousel seamlessly.
- Define a JavaScript function goToSlide() which is handles the button clicks.This function creates a new Bootstrap Carousel instance and uses its to method to navigate to the specified slide index.
- Create responsive webpage by using relevant Bootstrap 5 classes.
Example: This example shows the implementation of above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Carousel</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body class="bg-success d-flex flex-column min-vh-100">
<div class="container py-5">
<div class="row">
<div class="col-12 text-center">
<h1 class="text-light">
GeeksforGeeks
</h1>
<h2> Carousel in Bootstrap 5</h2>
</div>
</div>
</div>
<div class="container">
<div class="carousel-container w-50 h-50 mx-auto position-relative">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg"
class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg"
class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg"
class="d-block w-100" alt="Slide 3">
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg"
class="d-block w-100" alt="Slide 4">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="visually-hidden">Next</span>
</button>
<div class="carousel-buttons d-flex justify-content-center">
<button class="btn btn-primary mx-1" onclick="goToSlide(0)">
Slide 1</button>
<button class="btn btn-primary mx-1" onclick="goToSlide(1)">
Slide 2</button>
<button class="btn btn-primary mx-1" onclick="goToSlide(2)">
Slide 3</button>
<button class="btn btn-primary mx-1" onclick="goToSlide(3)">
Slide 4</button>
</div>
</div>
</div>
</div>
<script>
function goToSlide(slideIndex) {
const carousel = document.getElementById('myCarousel');
const carouselInstance = new bootstrap.Carousel(carousel);
carouselInstance.to(slideIndex);
}
</script>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...