Posted By admin
Colourful Tabbed Slider Carousel
Demo

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.,The author is BhaumikPatel

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *