nice slider best of luck and that if you need portfolio website then click blew link
http://designbootstrap.net/
hmnazim () - 8 years ago - Reply 0
hi................
Colourful Tabbed Slider Carousel
active class color is not changing with slider
Vishal Chand () - 9 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 () - 9 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
Is there a way to get the tabs vertical, on the right side of the carousel?
Paola () - 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 () - 10 years ago - Reply 0
Hey guys!, the js code doesn't works here =( The page keep static
Lauckson Santos () - 10 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 () - 10 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
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
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