bootstrap carousel 可以旋转两个不同 carousel ID 的 carousel-items 吗？

如何解决bootstrap carousel 可以旋转两个不同 carousel ID 的 carousel-items 吗？

我有一个简单的 BS 4 轮播图，如下所示：

<div class="col-12">
    <a class="carousel-control-prev text-dark" href="#myCarousel" role="button" data-slide="prev">
        <span class="fa fa-chevron-circle-left" aria-hidden="true"></span>
        <span class="sr-only">PrevIoUs</span>
    </a>
    <a class="carousel-control-next text-dark" href="#myCarousel" role="button" data-slide="next">
        <span class="fa fa-chevron-circle-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="container carousel slide w-100 pointer-event" id="myCarousel">
    <div class="carousel-inner" role="listBox">
        <div class="carousel-item active"></div>
        <div class="carousel-item"></div>
        <div class="carousel-item"></div>
    </div>
</div>

下一次和上一次点击正在旋转#myCarousel 的轮播项目。

现在，是否可以在旋转#myCarousel 项目的同时旋转另一个具有不同 ID 的 div 的轮播项目？

这是我想要使用相同的下一个/上一个点击与第一组项目一起旋转的第二个内容：

<div id="second-carousel" class="col-sm-7 carousel slide w-100 pointer-event">
    <div class="carousel-inner" role="listBox">
        <div id="first" class="carousel-item active"></div>
        <div id="second" class="carousel-item"></div>
        <div id="third" class="carousel-item"></div>
    </div>  
</div>

解决方法

您可以使用第一个轮播中的事件以编程方式更改第二个。

事件对象包含状态并包括属性 to 和 from

$("#myCarousel").on('slide.bs.carousel',function(e){   
    $("#myCarousel2").carousel(e.to);    
});

Demo