Bootstrap Carousel w/ Nav

Twitter Bootstrap Carousel with pagination style nav (+fade versio)

by Ayyappan Sakthivadivel

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.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/888&text=Technology 1" />
        Testing1
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/aaa&text=Computer 2" />
        Acting2
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/444&text=Chip 3" />
        Drama3
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="btn btn-primary carousel-control left" href="#myCarousel" data-slide="prev">Prev</a>
  <a class="btn btn-primary carousel-control right" href="#myCarousel" data-slide="next">Next</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;   
}


/* Fade transition for carousel items */
.carousel .item {
    left: 0 !important;
      -webkit-transition: opacity .3s; /*adjust timing here */
         -moz-transition: opacity .3s;
           -o-transition: opacity .3s;
              transition: opacity .3s;
}
.carousel-control {
    background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
    opacity: 1;
    z-index: 1;
}

.carousel-control{
    font-size:12px;
    border-radius:0;
    top:0;
    margin:0;
}
.active.left,
.active.right {
    opacity: 0;
    z-index: 2;
}
/* END: Fade transition for carousel items */

JavaScript

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



$('#myCarousel').on('slid', '', checkitem);


$(document).ready(function(){
	checkitem();
});




function checkitem()
{
  var $this = $('#myCarousel');
  if($('.carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  } else {
    $this.children('.carousel-control').show();
  } 
}