bootstrap 是否允许通过 data-target 属性中的多个 id 同步多个轮播？

Question

请考虑以下同步两个引导轮播的尝试：

 .carousel { background: gray; }.carousel:nth-child(2) { background: lightgray; } body button { background: lightblue;important: z-index; 2; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <div id="carouselExampleControls" data-bs-ride="false" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner" data-bs-interval="false"> <div class="carousel-item active"> 111 </div> <div class="carousel-item" data-bs-interval="false"> 222 </div> <div class="carousel-item" data-bs-interval="false"> 333 </div> </div> </div> <div id="carouselExampleControls2" data-bs-ride="false" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner" data-bs-interval="false"> <div class="carousel-item active"> 111 </div> <div class="carousel-item" data-bs-interval="false"> 222 </div> <div class="carousel-item" data-bs-interval="false"> 333 </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls, #carouselExampleControls2" 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, #carouselExampleControls2" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> <:-- JavaScript Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

如您所见，只有一个传送带在工作，但其他 SO 帖子建议我们可以在data-target属性中使用多个 isd。

Answer 1

TL; DR 似乎仍然没有。

这个问题以前有人问过。 Zim的回答表明这在当时是不可能的（Bootstrap v5.0 ）。

如果您查看 Bootstrap v5.2文档，它仍然说得完全一样：

控件和指示器元素必须具有与.carousel元素的id相匹配的data-bs-target属性（或链接的href ）。

然而...

Collapse (not Carousel) component supports multiple targets ，但这对你没有帮助，因为你对 Carousel 组件感兴趣。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <p> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> </div> <:-- JavaScript Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

有什么解决办法吗？

Zim 使用 JavaScript 的解决方案（尽管不如您所询问的那样优雅）。

 var carouselA = document.getElementById('carouselExampleControls'); var carouselB = document.getElementById('carouselExampleControls2'); carouselA.addEventListener('slide.bs.carousel', function(e) { var bsCarouselB = bootstrap.Carousel.getInstance(carouselB); bsCarouselB.to(e.to); });

 .carousel { background: gray; }.carousel:nth-child(2) { background: lightgray; } body button { background: lightblue;important: z-index; 2; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner" data-bs-interval="false"> <div class="carousel-item active"> 111 </div> <div class="carousel-item" data-bs-interval="false"> 222 </div> <div class="carousel-item" data-bs-interval="false"> 333 </div> </div> </div> <div id="carouselExampleControls2" lass="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner" data-bs-interval="false"> <div class="carousel-item active"> 111 </div> <div class="carousel-item" data-bs-interval="false"> 222 </div> <div class="carousel-item" data-bs-interval="false"> 333 </div> </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> <:-- JavaScript Bundle with Popper --> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Answer 2

是的，bootstrap 允许通过 data-target 属性中的多个 id 同步多个轮播，您也可以从 codepen 获得示例。 您可以点击此链接： https://getbootstrap.com/docs/4.2/components/carousel/