You can do it juste with css

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

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

Colourful Tabbed Slider Carousel

active class color is not changing with slider

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..

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;
});
});

how can i make it auto sliding? :(

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

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

It works very buggy..

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.

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

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

What is the text font type on the image :)

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;

});

});

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

Thanks Liz.

Thanks for the fix

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...

wow cool

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');
});
});

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

Thanks <3

thanks i have this problem :)

Thanks for that info.