bootstrap之carousel轮播图自定义分页器
最近要开发一个轮播图的看板页面，试用下 bootstrap 的轮播图组件，因为分页器的部分需要自定义（文字过长需要放到轮播图区域的外面），使用 List group 组件作为轮播图的分页器放在左边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="./plugins/jquery/jquery-3.3.1.js"></script>
<script src="./plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>
<style>
.carousel-item {
height: 400px;
border: 1px silver solid;
}
.list-group {
height: 400px;
overflow-y: scroll;
transition: scrollTop 2s ease-out;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row g-2 mt-3">
<div class="col-2">
<div class="list-group" id="listGroup">
<div data-bs-target="#carouselExample" data-bs-slide-to="0" class="list-group-item active">Item0</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="1" class="list-group-item">Item1</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="2" class="list-group-item">Item2</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="3" class="list-group-item">Item3</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="4" class="list-group-item">Item4</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="5" class="list-group-item">Item5</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="6" class="list-group-item">Item6</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="7" class="list-group-item">Item7</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="8" class="list-group-item">Item8</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="9" class="list-group-item">Item9</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="10" class="list-group-item">Item10</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="11" class="list-group-item">Item11</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="12" class="list-group-item">Item12</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="13" class="list-group-item">Item13</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="14" class="list-group-item">Item14</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="15" class="list-group-item">Item15</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="16" class="list-group-item">Item16</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="17" class="list-group-item">Item17</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="18" class="list-group-item">Item18</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="19" class="list-group-item">Item19</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="20" class="list-group-item">Item20</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="21" class="list-group-item">Item21</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="22" class="list-group-item">Item22</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="23" class="list-group-item">Item23</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="24" class="list-group-item">Item24</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="25" class="list-group-item">Item25</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="26" class="list-group-item">Item26</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="27" class="list-group-item">Item27</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="28" class="list-group-item">Item28</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="29" class="list-group-item">Item29</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="30" class="list-group-item">Item30</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="31" class="list-group-item">Item31</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="32" class="list-group-item">Item32</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="33" class="list-group-item">Item33</div>
<div data-bs-target="#carouselExample" data-bs-slide-to="34" class="list-group-item">Item34</div>
</div>
</div>
<div class="col-10">
<div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="2000" data-bs-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">Item0</div>
<div class="carousel-item">Item1</div>
<div class="carousel-item">Item2</div>
<div class="carousel-item">Item3</div>
<div class="carousel-item">Item4</div>
<div class="carousel-item">Item5</div>
<div class="carousel-item">Item6</div>
<div class="carousel-item">Item7</div>
<div class="carousel-item">Item8</div>
<div class="carousel-item">Item9</div>
<div class="carousel-item">Item10</div>
<div class="carousel-item">Item11</div>
<div class="carousel-item">Item12</div>
<div class="carousel-item">Item13</div>
<div class="carousel-item">Item14</div>
<div class="carousel-item">Item15</div>
<div class="carousel-item">Item16</div>
<div class="carousel-item">Item17</div>
<div class="carousel-item">Item18</div>
<div class="carousel-item">Item19</div>
<div class="carousel-item">Item20</div>
<div class="carousel-item">Item21</div>
<div class="carousel-item">Item22</div>
<div class="carousel-item">Item23</div>
<div class="carousel-item">Item24</div>
<div class="carousel-item">Item25</div>
<div class="carousel-item">Item26</div>
<div class="carousel-item">Item27</div>
<div class="carousel-item">Item28</div>
<div class="carousel-item">Item29</div>
<div class="carousel-item">Item30</div>
<div class="carousel-item">Item31</div>
<div class="carousel-item">Item32</div>
<div class="carousel-item">Item33</div>
<div class="carousel-item">Item34</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="row mt-3">
<label> <input class="form-check-input" type="checkbox" id="checkbox" value="" />stop </label>
</div>
</div>
</body>
<script>
const myCarousel = document.getElementById("carouselExample");
const carousel = new bootstrap.Carousel("#carouselExample");
const perPage = 10;
const size = 35;
const perHeight = 41;
const listGroup = document.getElementById("listGroup");
myCarousel.addEventListener("slide.bs.carousel", (event) => {
$(".list-group-item").eq(event.to).addClass("active").siblings().removeClass("active"); page();
});
$(".list-group-item").click(function (event) {
$(this).addClass("active").siblings().removeClass("active");
});
$(".carousel-control-prev").click(function () {
page();
});
$(".carousel-control-next").click(function () {
page();
});
$("#checkbox").on("click", function () {
if ($(this).is(":checked")) {
carousel.pause();
} else {
carousel.cycle();
}
});
function page() {
const index = $(".list-group-item.active").index();
const n = Math.floor(size / perPage);
for (let i = 0; i <= n; i++) {
if (index >= i * perPage && index < (i + 1) * perPage) {
listGroup.scrollTop = i * perPage * perHeight;
}
}
}
</script>
</html>
浙公网安备 33010602011771号