Bootstrap同步轮播

Question

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

我试图通过添加间隔false来停止摩托车，然后尝试同步它并且它不能正常工作。

它没有同步。 什么都没有动，因为当间隔设置为假时，似乎下一步不起作用。

    $('#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>