Bootstrap Carousel w/ Nav

Twitter Bootstrap Carousel with pagination style nav.

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="http://placehold.it/300x200/444&text=Item 1" />
        </div>
        <div class="item">
            <iframe id="myVideo" src="https://player.vimeo.com/video/124400795?api=1&player_id=myVideo"></iframe>
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200/444&text=Item 3" />
        </div>
    </div>
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
    <li class="active"><a href="#1">1</a>
    </li>
    <li><a href="#2">2</a>
    </li>
    <li><a href="#3">3</a>
    </li>
</ol>

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
 #myCarousel {
    margin-top: 40px;
}
.carousel-linked-nav, .item img {
    display: block;
    margin: 0 auto;
}
.carousel-linked-nav {
    width: 120px;
    margin-bottom: 20px;
}

JavaScript

var iframe = $('#myVideo')[0];
var player = Froogaloop(iframe);


// When the player is ready, add listeners for finish, and playProgress
player.addEvent('ready', function () {
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

function onFinish(id) {
    $('#myCarousel').carousel('play');
}

function onPlayProgress(data, id) {
    $('#myCarousel').carousel('pause');
}

// invoke the carousel
$('#myCarousel').carousel({
    interval: 3000
});

/* SLIDE ON CLICK */

$('.carousel-linked-nav > li > a').click(function () {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-linked-nav .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function () {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});