<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Card with Carousel</title>
<link href=
rel="stylesheet">
<style>
.card {
margin-top: 50px;
/* Add margin to the top of the card */
}
.card-body {
padding: 20px;
/* Add padding to the card body */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="card">
<div class="card-header">
Card Component with responsive carosuel
</div>
<div class="card-body">
<div id="carouselExampleControls"
class="carousel slide"
data-bs-ride="carousel"
data-bs-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src=
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src=
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src=
class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleControls"
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="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="card-footer text-muted">
Responsive Carousel
</div>
</div>
</div>
</div>
</div>
<script src=
</script>
<script>
// Trigger carousel sliding automatically every one second
setInterval(function () {
let carousel = document.querySelector('#carouselExampleControls');
let carouselInstance = bootstrap.Carousel.getInstance(carousel);
carouselInstance.next();
}, 1000);
</script>
</body>
</html>