"Tabbed Slider Carousel"
Bootstrap 3.0.3 Snippet by sevenx.de

<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/cccccc/ffffff"> <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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/999999/cccccc"> <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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/dddddd/333333"> <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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p> </div> </div><!-- End Item --> <div class="item"> <img src="http://placehold.it/1200x400/999999/cccccc"> <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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</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; } #myCarousel .nav a { border-radius:0px; }
$(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:

After the loop finishes, and starts again, the pills are not blue anymore, when the 4th pill finish, those pills are not showing active anymore, but in this preview it's working correctly, weird

Vyprazany Karfiol () - 1 year ago - Reply -1


Thanks, i love it a lot

Vyprazany Karfiol () - 1 year ago - Reply -1


I would like to ask about responsivity, on phone version it need too much margin-top, od i did something wrong?

Vyprazany Karfiol () - 1 year ago - Reply -2


please help me code is not working....it showing line by line images...i have to add anything to this code?
file:///C:/Users/saikumar/Desktop/slide6/slide6.html

Sai Kumar () - 2 years ago - Reply 0


Why not chage with HOVER?

Kleyton () - 2 years ago - Reply 0


Great code! Thanks!! I tried adding previous and next button controls but only works up to the last tab (active tab).

Lemony () - 2 years ago - Reply 0


doesnt work on the latest release of Bootstrap

vannquish () - 2 years ago - Reply 0


I like this slider a lot but it as a small issue i was not able to fix. Maybe you can help? Have a look at https://ksg.ren-it.nl/
As you can see the slider contains 4 items. When one of the nav pills get's active the color of the item changes but it seems is not the whole area that is coloring only the href part. I noticed this when adding another line of text. Any idea how to fix this?

Ron Killaars () - 3 years ago - Reply 0


Thank you for this article - Is there any way to have the tabs on the left vertical

Nuno Sarmento () - 3 years ago - Reply 0


Hello admin, i hvae been searching and testing about this issue. all i want to make slider like images https://www.dropbox.com/s/v..., please kindly open that url, if any tutorial or suggest thanks for your fast respond :D

freddy () - 3 years ago - Reply 0


This is a bit cleaner and will work better on next cycles:

var $carousel = $('#teaserCarousel'), // Carousel Wrapper
$carouselNav = $('#carouselNav'); // Carousel-Navigation (UL-Element)

$carousel.carousel({ interval: 6000 });
$carousel.find('.nav a').on('click', function() {
$carouselNav.find('li.active').removeClass('active');
$(this).parent().addClass('active');
});
$carousel.on('slide.bs.carousel', function(e) {
var currentSlideNo = $(e.relatedTarget).index();
$carouselNav.find('li.active').removeClass('active');
$carouselNav.find('li[data-slide-to="' + currentSlideNo + '"]').addClass('active');
});

Daniel S () - 3 years ago - Reply 0


very nice tools, wish it could be used without any backlinks - Team @equinoxesin

Equinox e Services () - 3 years ago - Reply 0


do not add active class in menues

onkar () - 3 years ago - Reply 0


does anyone know how to change the height of the carousel

asagfg () - 3 years ago - Reply 0


hi.... how do i add navigation arrows in addition to the tabs please?

Korkor K-a () - 4 years ago - Reply 0


resize¿???

tito () - 4 years ago - Reply 0


i have a issue, here show only first pill colored and other without color but slides working properly......any idea?

Jugal Kishore () - 4 years ago - Reply 0


that's what it should do, one pill is colored to show which slide is active and the others without color to show that they're not active...

maxsurguy () - 4 years ago - Reply 0


Thank You,
but here show only first tab as a active pill and when flow goes to next slide is also shows the first pills is active, i think it should be like flow goes to next slide then the second pills shows as active, but here nothing like this......???

I have also used the code that given in upper example.

Jugal Kishore () - 4 years ago - Reply 0


what browser are you using?

maxsurguy () - 4 years ago - Reply 0


admin plz help me i used your slider code and i want to make one change , the change is when i hover on slider tab image should change according to that tab

shan () - 2 years ago - Reply 0


Mozilla Firefox..

Jugal Kishore () - 4 years ago - Reply 0


This carousel have bugs. Click on tabs as fast as you can and you will see...

Stanescu Eduard-Dan () - 4 years ago - Reply 0


What's wrong with it?

maxsurguy () - 4 years ago - Reply 0


after all the slides have gone through once the nav-pills stop highlighting, is there an easy fix for this?

Guest () - 4 years ago - Reply 0


I just found that issue too

Guest () - 4 years ago - Reply 0


Why can't u just provide a download button??

midnightsteal () - 4 years ago - Reply 0


Because Bootstrap is a framework, you'll need to implement this carousel yourself.

Kevin () - 4 years ago - Reply 0


its not animating . i put them as u said...

Buddika Widu Ranaweera () - 4 years ago - Reply 0


this is awesome. where do i put the javascript? I am using cakephp and putting the html in a .ctp file under Pages. thanks!

adam () - 4 years ago - Reply 0


i cant seem to get the images to reload on a page if i use another gallery on a wordpress blog.

Please help...

The page is: http://mobilelasertag.co.za...

Thanks

Gareth Diedericks () - 4 years ago - Reply 0


Might be because the gallery uses mootools or other plugins which need the $.

Look up: jQuery noConflict

Alex () - 4 years ago - Reply 0


@cyruxx:disqus @garethdiedericks:disqus

You could code it like this so $ sign wont be in conflict with other js libs
Just add the 1st & last lines there
http://pastetool.com/pasteb...

Federico G - "Super freelancer () - 4 years ago - Reply 0


very nice

Henry Dalziel () - 4 years ago - Reply 0


Add:

.nav-pills > li > a { border-radius: 0; }

to the CSS file for a better look. :)

Alex () - 4 years ago - Reply 0