<!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
>