没错，Bootstrap 不支持开箱即用的轮播滑块选项卡。但是因为 Bootstrap 使用数据属性 data-bs-target 和 data-bs-slide-to 作为指标，您可以将它们应用于其他元素。
例如，您可以将它们应用于轮播之外的列表，即滑块选项卡：
<ul class="custom-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
...
</ul>
sn-p 中的滑块选项卡有更多的类来使用 row 和四列 col 来定位所有内容。只需单击 <li> 元素即可将轮播设置为该幻灯片索引 (0)。
但是您还想设置活动滑块选项卡的样式。您可以通过在其上切换类来使用 JavaScript 执行此操作，例如 .active 并使用 CSS 设置样式。第一个 sn-p 在 jQuery 中，但下面有一个纯 JavaScript 示例。
用 Jquery 解决
我们很幸运，Bootstrap’s carousel class exposes events for hooking into carousel functionality，喜欢slide.bs.carousel：
$('#carouselExampleIndicators').on('slide.bs.carousel', event => { ... });
只要旋转木马过渡到另一张幻灯片，就会触发此函数。在内部访问事件属性to，它保存下一张幻灯片的索引。然后切换active类：
const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');
现在应用一些自定义 CSS 来设置选项卡的样式，就是这样。以下是可设置样式的自定义指标的完整基本示例：
$('#carouselExampleIndicators').on('slide.bs.carousel', event => {
const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');
});
.custom-indicators li {
border-top: 3px solid transparent;
}
.custom-indicators li.active {
color: black;
font-weight: bold;
border-top: 3px solid black;
}
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="">
<ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
<li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
Slide 2
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
Slide 3
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
Slide 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JavaScript 解决方案
这是一个使用普通 Javascript 来完成同样事情的解决方案。它循环遍历删除类 active 的所有滑块选项卡，并将其应用于具有下一张幻灯片的索引 (data-bs-slide-to="?") 的滑块选项卡。
var carousel = document.querySelector('#carouselExampleIndicators');
carousel.addEventListener('slide.bs.carousel', event => {
var nextSlide = event.to;
var customIndicators = document.querySelectorAll('.custom-indicators li');
for (var i = 0; i < customIndicators.length; i++) {
customIndicators[i].classList.remove('active');
}
document.querySelector('.custom-indicators li[data-bs-slide-to="' + nextSlide + '"]').classList.add('active');
});
.custom-indicators li {
border-top: 3px solid transparent;
}
.custom-indicators li.active {
color: black;
font-weight: bold;
border-top: 3px solid black;
}
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="">
<ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
<li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
Slide 2
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
Slide 3
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
Slide 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>