How to make multi item carousel using Bootstrap 5
Last Updated :
12 Apr, 2024
We will learn how to implement a multi-item carousel using Bootstrap 5. The carousel component in Bootstrap 5 provides a user-friendly way to display a rotating set of content, such as images or text, in a sliding manner. This feature is commonly used for showcasing products, portfolios, or any content that you want to highlight in a visually appealing manner.
Approach
In this approach, we are using carousel component provided by Bootstrap. we have used the carousel component and added more divs into that to show multi-item in a single carousel. we have added some random images to represent the card with some demo text. Firstly we have wrapped the parent div into container class and we have wrapped all the divs into it. we have added the indicators to navigate from one carousel to another carousel. we have already implemented it as auto play carousel.
Example: This example shows the implementation of the 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>Multi Item Carousel Cards</title>
<link rel="stylesheet" type="text/css"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Multi Item Carousel cards</h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1"
href="#carouselExampleIndicators2"
role="button"
data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3"
href="#carouselExampleIndicators2"
role="button"
data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2"
class="carousel slide"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid"
alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240122184958/images2.jpg">
<div class="card-body">
<h4 class="card-title">
Special title treatment</h4>
<p class="card-text">With supporting text
below as a natural lead-in</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid"
alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240122184958/images2.jpg">
<div class="card-body">
<h4 class="card-title">Special title
treatment</h4>
<p class="card-text">With supporting
text below as a natural
lead-in to additional
content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid"
alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230407154213/gfg-bag.jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid"
alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240110011854/reading-925589_640.jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240122182422/images1.jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240110011854/reading-925589_640.jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid"
alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240110011815/sutterlin-1362879_640-(1).jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240110011929/glasses-1052010_640.jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid"
alt="100%x280"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240110011929/glasses-1052010_640.jpg">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below
as a natural lead-in to
additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- JavaScript dependencies -->
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript"
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript"
src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...