"Colourful Tabbed Slider Carousel "
Bootstrap 3.0.3 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services"> <div class="carousel-caption"> <h3> Headline</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li> </ul> </div> <!-- End Carousel --> </div>
body { padding-top: 20px; } #myCarousel .nav a small { display: block; } #myCarousel .nav { background: #eee; } .nav-justified > li > a { border-radius: 0px; } .nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; } .nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; } .nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; } .nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
$(document).ready( function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });

Related: See More


Questions / Comments:

You can do it juste with css

hh () - 7 years ago - Reply 0


nice slider best of luck and that if you need portfolio website then click blew link
http://designbootstrap.net/

hmnazim () - 7 years ago - Reply 0


hi................

Colourful Tabbed Slider Carousel

active class color is not changing with slider

Vishal Chand () - 8 years ago - Reply 0


When we implement this in a .php masterpage using bootstrap 3.0, after the slide had completed 4 slides the nav not highlighted. how to solve this problem..

deepak () - 8 years ago - Reply 0


When i embedded this to a html, after the slide complete the cycle. It stopped and here is the working code for JS.

$(document).ready(function () {
$('#mainCarousel').carousel({
interval: 4000
});

var clickEvent = false;
$('#mainCarousel').on('click', '.nav a', function () {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function (e) {
if (!clickEvent) {

var count = $('#indexmenu').children().length - 1;
var current = $('#indexmenu li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.next().data('slide-to'));
if (isNaN(id)) {
$('#indexmenu li').first().addClass('active');
}
}
clickEvent = false;
});
});

EA () - 9 years ago - Reply 0


how can i make it auto sliding? :(

Umesh () - 9 years ago - Reply 0


Is there a way to get the tabs vertical, on the right side of the carousel?

Paola () - 9 years ago - Reply 0


Is there any way to change slides on hover instead on click ?

Kalyan P () - 9 years ago - Reply 0


It works very buggy..

disqus_FIPSus5rM0 () - 9 years ago - Reply 0


I think it works fine, but because of the fast slider change, your click can be ignored, if you press it on a bad time. Though, I did not implement this yet.

laurens () - 9 years ago - Reply 0


Hey guys!, the js code doesn't works here =( The page keep static

Lauckson Santos () - 9 years ago - Reply 0


Great job !! I forked if i do changes i will post it and reference your job thanks man :D

Erich Casagrande Perusso () - 9 years ago - Reply 0


What is the text font type on the image :)

Guest () - 9 years ago - Reply 0


If you're using any other .nav elements, like in the header, it appears as though .active isn't cycling back to the first slide however it's cycling through header navs. I've specified the ID like so

$(document).ready( function() {

$('#myCarousel').carousel({

interval: 4000

});

var clickEvent = false;

$('#myCarousel').on('click', '.nav a', function() {

clickEvent = true;

$('.nav li').removeClass('active');

$(this).parent().addClass('active');

}).on('slid.bs.carousel', function(e) {

if(!clickEvent) {

var count = $('#myCarousel .nav').children().length -1;

var current = $('#myCarousel .nav li.active');

current.removeClass('active').next().addClass('active');

var id = parseInt(current.data('slide-to'));

if(count == id) {

$('#myCarousel .nav li').first().addClass('active');

}

}

clickEvent = false;

});

});

Liz MacDonell () - 10 years ago - Reply 0


Thx. I had been searching why there was this bug for 2 hours....

paidge () - 6 years ago - Reply 0


Thanks Liz.

Rahim TUR () - 6 years ago - Reply 0


Thanks for the fix

jayydellyy () - 9 years ago - Reply 0


The javascript code (original and the replied one) doesn't work properly for me when going to previous slide etc.
I'v asked on SO on how to fix the javascript code: http://stackoverflow.com/qu...

Geoffrey De Smet () - 10 years ago - Reply 0


wow cool

Yoza Wiratama () - 10 years ago - Reply 0


When we embedded this in a .net masterpage using bootstrap 3.0, after the slide had completed 4 slides the nav no longer highlighted. We changed the jquery to this to fix...

$(document).ready(function () {
$('#myCarousel').carousel({
interval: 4000
});

var clickEvent = false;

$('#myCarousel').on('click', '.nav a', function () {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
});

$('#myCarousel').bind('slid', function () {
// Get currently selected item
var item = $('#myCarousel .carousel-inner .item.active');

// Deactivate all nav links
$('#myCarousel .nav li').removeClass('active');

// Index is 1-based, use this to activate the nav link based on slide
var index = item.index() + 1;
$('#myCarousel .nav li:nth-child(' + index + ')').addClass('active');
});
});

West 4 Media () - 10 years ago - Reply 0


Why I though jQuery code to change this code still does not work

isan () - 8 years ago - Reply 0


Thanks <3

Mitchell () - 9 years ago - Reply 0


thanks i have this problem :)

mohammad () - 9 years ago - Reply 0


Thanks for that info.

NM () - 10 years ago - Reply 0