carousel terms defined as multiple images with text or without text show after one by one within same block.
in below example shows slider which is fully responsive and auto timer just use css
.carousel-inner img {
width: 100%;
height: 100%;
}
add images and text
<div class="carousel-item active">
<img src="la.jpg" alt="India" width="1100" height="500">
<div class="carousel-caption">
<h3>India</h3>
<p>sample text here</p>
</div>
</div>
finally , makes complete code as below
<!DOCTYPE html>
<html lang="en">
<head>
<title>carousel or slider Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="india.jpg" alt="India" width="1100" height="500">
<div class="carousel-caption">
<h3>India</h3>
<p>Sample text here</p>
</div>
</div>
<div class="carousel-item">
<img src="asia.jpg" alt="asia" width="1100" height="500">
<div class="carousel-caption">
<h3>asia</h3>
<p>Thank you, asia!</p>
</div>
</div>
<div class="carousel-item">
<img src="africa.jpg" alt="africa" width="1100" height="500">
<div class="carousel-caption">
<h3>africa</h3>
<p>Sample Text here</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
above code is very simple to use, fast load, responsive.
we can also create slider using other programming lanuage also like jquery slider, css slider
