Html 引导同步传送带

我正在尝试同步旋转木马，以便：第一个旋转木马滑动，然后是第二个，然后是第三个，依此类推

我试图通过添加间隔假来停止摩托车，然后尝试同步，但效果不好

它不同步。 没有任何东西在移动，因为当interval设置为false时，next似乎不起作用

    $('#carousel01').carousel('next');
    $('#carousel01').on('slid.bs.carousel', function () {
        console.log("first finish");
        $('#carousel02').carousel('pause');
        $('#carousel01').carousel('pause');
        $('#carousel03').carousel('pause');
        setTimeout(function () { $('#carousel02').carousel('next'); }, 3000);
    });
    $('#carousel02').on('slid.bs.carousel', function () {
        console.log("second finish");
        $('#carousel02').carousel('pause');
        $('#carousel01').carousel('pause');
        $('#carousel03').carousel('pause');
        setTimeout(function () { $('#carousel03').carousel('next'); }, 3000);
    });
    $('#carousel03').on('slid.bs.carousel', function () {
        console.log("third finish");
        $('#carousel02').carousel('pause');
        $('#carousel01').carousel('pause');
        $('#carousel03').carousel('pause');
        setTimeout(function () { $('#carousel01').carousel('next'); }, 3000);
    });


<div class="col-xs-4">
        <img src="../../../000Frames/site/images/pic01c1.jpg" class="kavoat shortImg" />
        <div id="carousel01" data-keyboard="false"  class="carousel slide carousel-fade" data-ride="carousel">
            <a class="left carousel-control" href="#carousel01" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel01" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active longImg" style="background-image:url('../../../000Frames/site/images/pic02c1.jpg'); background-size:cover;"> 
                </div>
                <div class="item longImg" style="background-image:url('../../../000Frames/site/images/pic03c1.jpg'); background-size:cover;">
                </div>
            </div>
        </div>        
    </div>
    <div class="col-xs-4">
        <div id="carousel02"data-keyboard="false"  class="carousel slide carousel-fade" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active longImg" style="background-image:url('../../../000Frames/site/images/pic03c1.jpg'); background-size:cover;"> 
                </div>
                <div class="item longImg" style="background-image:url('../../../000Frames/site/images/pic02c1.jpg'); background-size:cover;">
                </div>
            </div>
        </div>
         <img src="../../../000Frames/site/images/pic04c1.jpg" class="kavoab shortImg" />   
    </div>
    <div class="col-xs-4">
        <img src="../../../000Frames/site/images/pic05c1.jpg"  class="kavoat shortImg"/>
        <div id="carousel03" data-keyboard="false" class="carousel slide carousel-fade" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active longImg" style="background-image:url('../../../000Frames/site/images/pic06c1.jpg'); background-size:cover;"> 
                </div>
                <div class="item longImg" style="background-image:url('../../../000Frames/site/images/pic03c1.jpg'); background-size:cover;">
                </div>
            </div>
        </div>   
    </div>

$（'#carousel01'）。carousel（'next'）；
$（'#carousel01'）.on（'slided.bs.carousel'，函数（）{
控制台日志（“第一次完成”）；
$（#carousel02'）。carousel（'pause'）；
$（'旋转木马01'）。旋转木马（'暂停'）；
$（'旋转木马03'）。旋转木马（'暂停'）；
setTimeout（函数（）{$（'#carousel02'）.carousel（'next'）；}，3000）；
});
$（'#carousel02'）.on（'slided.bs.carousel'，函数（）{
控制台日志（“第二次完成”）；
$（#carousel02'）。carousel（'pause'）；
$（'旋转木马01'）。旋转木马（'暂停'）；
$（'旋转木马03'）。旋转木马（'暂停'）；
setTimeout（函数（）{$（'#carousel03'）.carousel（'next'）；}，3000）；
});
$（'#carousel03'）.on（'slided.bs.carousel'，函数（）{
控制台日志（“第三次完成”）；
$（#carousel02'）。carousel（'pause'）；
$（'旋转木马01'）。旋转木马（'暂停'）；
$（'旋转木马03'）。旋转木马（'暂停'）；
setTimeout（函数（）{$（'#carousel01'）.carousel（'next'）；}，3000）；
});

？？？你的问题没有正确标记，这意味着引导专家没有看到它。