Bootstrap Carousel w/ Nav

Twitter Bootstrap Carousel with pagination style nav.

by ashleycam3ron

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="allSlides" style="display:none;">
    <div class="item" data-project='1'>
        <img src="http://placehold.it/300x200/888&text=Item 1 Project 1" />
    </div>
    <div class="item" data-project='1'>
        <img src="http://placehold.it/300x200/aaa&text=Item 2 Project 1" />
    </div>
    <div class="item" data-project='1'>
        <img src="http://placehold.it/300x200/444&text=Item 3 Project 1" />
    </div>
    <div class="item" data-project='2'>
        <img src="http://placehold.it/300x200/888&text=Item 1 Project 2" />
    </div>
    <div class="item" data-project='2'>
        <img src="http://placehold.it/300x200/aaa&text=Item 2 Project 2" />
    </div>
    <div class="item" data-project='2'>
        <img src="http://placehold.it/300x200/444&text=Item 3 Project 2" />
    </div>
    <div class="item" data-project='3'>
        <img src="http://placehold.it/300x200/888&text=Item 1 Project 3" />
    </div>
    <div class="item" data-project='3'>
        <img src="http://placehold.it/300x200/aaa&text=Item 2 Project 3" />
    </div>
    <div class="item" data-project='3'>
        <img src="http://placehold.it/300x200/444&text=Item 3 Project 3" />
    </div>
</div>

<ol class="carousel-linked-projects pagination">
  <li class="active"><a href="#1" data-project='1'>1</a></li>
  <li><a href="#2" data-project='2'>2</a></li>
  <li><a href="#3" data-project='3'>3</a></li>
</ol>

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->           
  <div class="carousel-inner">
    <div class="active item" data-project='1'>
        <img src="http://placehold.it/300x200/888&text=Item 1 Project 1" />
    </div>
    <div class="item" data-project='1'>
        <img src="http://placehold.it/300x200/aaa&text=Item 2 Project 1" />
    </div>
    <div class="item" data-project='1'>
        <img src="http://placehold.it/300x200/444&text=Item 3 Project 1" />
   ...

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.carousel-linked-projects,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav,
.carousel-linked-projects {
  width: 120px;
  margin-bottom: 20px;   
}

JavaScript

var myCarousel = $('#myCarousel')
, carouselLinkedNav = $('.carousel-linked-nav')
, carouselLinkedProjects = $('.carousel-linked-projects')
, allSlides = $('#allSlides').find('div.item')
// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */ 

carouselLinkedNav.find('li > a').click(function() {
    var $this = $(this)
    // grab href, remove pound sign, convert to number
      , item = $this.attr('href').substring(1) | 0;

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

    // remove current active class
    carouselLinkedNav.find('.active').removeClass('active');

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

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

carouselLinkedProjects.find(' li > a').click(function() {
    carouselLinkedProjects.find('li').removeClass('active')
    $(this).closest('li').addClass('active')
    
    var currentProject = $(this).data('project')
    
     myCarousel.find('.item').remove()
     $slides = allSlides.filter( function () { 
          return $(this).data('project') == currentProject 
     })
     
     $slides.eq(0).addClass('active')
     
     console.log(this, currentProject , $slides )
     
     myCarousel.find('.carousel-inner').append($slides)
     
     myCarousel.carousel("pause").removeData().carousel(0)
    
    return false
});
/* AUTOPLAY NAV HIGHLIGHT */

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

    // remove active class
    carouselLinkedNav.find('.active').removeClass('active');

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

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

});