Paging Carousel using Twitter Bootstrap

Twitter Bootstrap is powerful front-end framework for easier, faster and a reliable web development. It has 12-column responsive grid systems with dozens of JavaScript plug-in, styling for all the html tags (forms controls, tables, headings, lists etc). It provides everything to get started with the developed immediately. But, If you want advanced features you have to do them by yourself.

For example, bootstrap provides a simple carousel JavaScript plug-in that only support next and back slider navigation. It has only two callbacks, two attributes and five methods at the moment. I wanted to have a paging carousel. I want all items to be displayed below the carousel as bullets or numbers and when clicked should show up the exact slide. It should also have the default behavior of auto scrolling to next slide. Bootstrap does not support it. Fortunately, it does have the way to develop one.

This is what we are looking for.

  1. First of all, we need html markup. Its same as in the bootstrap’s example with the addition of navigation div.
    <div id="myCarousel" class="carousel slide">
    
    <!-- Carousel items -->
    
    <div class="carousel-inner">
    
    <div class="active item">…</div>
    
    <div class="item">…</div>
    
    <div class="item">…</div>
    
    </div>
    
    <!-- Carousel nav -->
    
    </div>
    
    <div class="carousel-navbar">
    
    <div class="carousel-nav current" > 1 </div>
    
    <div class="carousel-nav"> 2 </div>
    
    <div class="carousel-nav"> 3 </div>
    
    </div>
  2. Call carousel
    $('#myCarousel').carousel()

    You should see your carousel working but not the navigation.

  3. Lets change the navigation when slide changes. We use carousel’s callback ‘slid’ event

    $('#myCarousel').bind('slid', function(e){ //This event is fired when the carousel has completed its slide transition.
    
    </div>
    index = $('#myCarousel .item').index($('#myCarousel .carousel-inner .active')); // find the index of current slide
    
    $('.carousel-navbar .current').removeClass('current'); // reset the navigation
    
    $('.carousel-nav').eq(index).addClass('current'); // update the navigation
    
    });
  4. Until now navigation only simulates the carousel’s effect. We want it show the selected slide when clicked.
    $('.carousel-nav').bind('click', function(e){
    
    $('.carousel-navbar .current').removeClass('current'); // reset the navigation
    
    index = $('.carousel-nav').index(this); // find the clicked slide navigation
    
    $('#myCarousel').carousel(index); // navigate to the selected slider
    
    $(this).addClass('current'); // mark selected to the clicked navigation
    
    });
  5. That’s it.

Additionally, you can style the navigation with the below css

.carousel-navbar {

text-align:center;

}

.carousel-nav {

border: 1px solid #ccc;

display:inline-block;

padding: <span style="color: black; font-family: Consolas; font-size: 9pt; background-color: white;">5px 10px</span>;

color:black;

}

.carousel-nav:hover{

border:1px solid #777;

}

.carousel-nav.current {

background-color:#ccc;

}
Advertisements

3 responses to “Paging Carousel using Twitter Bootstrap

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s