jquery - Bootstrap Carouselでビデオの後に次のスライドに進む方法は?

Question

ブートストラップ カルーセル (v3.0) を使用して、youtube/vimeo のビデオと画像をスライドさせています。ビデオがスライドにある場合、複数のビデオ/画像と自動再生ビデオを再生する必要があります。以下にコードを示します。

ヘッダー内:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom</title>
<link rel='stylesheet' href='http://getbootstrap.com/dist/css/bootstrap.css' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src='http://getbootstrap.com/dist/js/bootstrap.js'></script>

体内で：

<div id="container">
    <div id="body">
        <div class="row">
            <div class="col-9" id="panel1">
                <div class="carousel" id="slideshow">
                    <div class="carousel-inner">
                        <div class="item" active>
                            <img src="http://farm2.staticflickr.com/1064/1299342518_d874c634e6.jpg" />
                        </div>
                        <div class="item">
                            <img src="http://farm4.staticflickr.com/3673/9585032718_52afe21449.jpg" />
                        </div>
                        <div class="item">
                            <iframe width="560" height="315" src="http://www.youtube.com/embed/1iIZeIy7TqM" frameborder="0" allowfullscreen data-videoid="1iIZeIy7TqM" id="C2dFFiN00SY"></iframe>
                        </div>
                        <div class="item">
                            <h1>Parfiat</h1>
                            <p>You are here after the video!!!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

本文の下のスクリプト:

    <script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<script>
    function onPlayerReady(event) {
        event.target.playVideo();
    }

      // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            alert('Video is done... how do I can add the code to advance this to next slide and or to continue slideshow?');
        }
    }   

    function playVideo(videoID){
        //alert('this video ID is ' + videoID);

        var player = new YT.Player(videoID, {
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange 
                    }
                });
    }
</script>
<script>
    $('.carousel').carousel({
        interval: 2000
    })  

    $('.carousel').on("slide.bs.carousel", function (event) {
        // Bootstrap carousel marks the current slide (the one we're exiting) with an 'active' class
        var $currentSlide = $(".carousel").find(".active iframe");
        if ($currentSlide.length) { playVideo($currentSlide.attr("id")); }
        if ($currentSlide.length) { onYouTubeIframeAPIReady(); }        

    });
</script>

このスライドショーがループで継続することを確認したい. このコードに関するご協力をお願いいたします。