How to add Carousel in website – Bootstrap 5
December 18, 2022 - by admin
Bootstrap Carousel is a JavaScript plugin that allows you to create a slideshow for cycling through a series of images or other content. It is part of the popular front-end framework Bootstrap, which is used for designing responsive and mobile-first websites.
Here is an example of a blog post that explains how to use Bootstrap Carousel:
Creating a responsive and engaging slideshow for your website has never been easier but with Bootstrap Carousel this is more easier. This powerful JavaScript plugin, built on top of the popular Bootstrap framework, makes it simple to create a slideshow that looks great on any device.
To get started, you’ll need to include the Bootstrap CSS and JavaScript files, as well as the Carousel plugin, in your HTML document. You can either download the files from the Bootstrap website or include them via a CDN.
Once you have the necessary files in place, you can create a new Carousel by adding a div with the class “carousel” to your HTML. Inside this div, you’ll need to add a series of “slides” that will be displayed in your slideshow. Each slide should be wrapped in a div with the class “carousel-item”.
For example, here is the HTML for a simple Carousel with three slides:
Add CDN Link in Your website
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap5 Carosel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imagename.jpg" alt="Image Name" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="imagename.jpg" alt="Image Name" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="imagename.jpg" alt="Image Name" class="d-block" style="width:100%">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</body>
</html>
