<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<title>Fixed Sliding Carousel</title>
</head>
<body>
<div class="container mt-5">
<div id="myCarousel"
class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item
active h-90">
<img src=
class="mx-auto d-block w-80"
alt="HTML">
</div>
<div class="carousel-item h-90">
<img src=
class="mx-auto d-block w-80"
alt="CSS">
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#myCarousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon
bg-black rounded-circle"
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
bg-black rounded-circle"
aria-hidden="true">
</span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
</div>
<script src=
</script>
<script>
// Get carousel element
var myCarousel =
document.getElementById('myCarousel');
// Activate Carousel
new bootstrap.Carousel(myCarousel);
// Enable Carousel Indicators
var carouselItems =
document.querySelectorAll('.carousel-item');
carouselItems.forEach(function (item, index) {
item.addEventListener('click', function () {
new bootstrap.Carousel(myCarousel).to(index);
});
});
// Pause the carousel when the mouse is over it
myCarousel.addEventListener('mouseenter', function () {
new bootstrap.Carousel(myCarousel).pause();
});
myCarousel.addEventListener('mouseleave', function () {
new bootstrap.Carousel(myCarousel).cycle();
});
</script>
</body>
</html>