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

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

Similar snippets: See More


Comments:

Alex 2014-01-30 14:00:32
    Add:
Henry Dalziel 2014-01-30 22:11:36
    very nice
Gareth Diedericks 2014-01-30 23:52:39
    i cant seem to get the images to reload on a page if i use another gallery on a wordpress blog.
Alex 2014-01-31 07:18:14
    Might be because the gallery uses mootools or other plugins which need the $.
Federico G - "Super freelancer 2014-02-11 14:31:40
    @cyruxx:disqus @garethdiedericks:disqus
adam 2014-02-05 02:19:58
    this is awesome. where do i put the javascript? I am using cakephp and putting the html in a .ctp file under Pages. thanks!
Buddika Widu Ranaweera 2014-02-21 05:10:28
    its not animating . i put them as u said...
midnightsteal 2014-03-04 22:50:02
    Why can't u just provide a download button??
Kevin 2014-07-30 13:48:23
    Because Bootstrap is a framework, you'll need to implement this carousel yourself.
Guest 2014-03-12 00:01:08
    after all the slides have gone through once the nav-pills stop highlighting, is there an easy fix for this?
Guest 2014-05-08 17:12:44
    I just found that issue too
Stanescu Eduard-Dan 2014-06-15 14:36:47
    This carousel have bugs. Click on tabs as fast as you can and you will see...
maxsurguy 2014-06-15 22:29:45
    What's wrong with it?
Jugal Kishore 2014-07-18 10:56:03
    i have a issue, here show only first pill colored and other without color but slides working properly......any idea?
maxsurguy 2014-07-18 16:39:58
    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...
Jugal Kishore 2014-07-19 05:04:56
    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......???
maxsurguy 2014-07-20 04:08:16
    what browser are you using?
Jugal Kishore 2014-07-21 05:07:03
    Mozilla Firefox..
shan 2016-04-02 12:38:50
    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
tito 2014-08-08 21:14:08
    resize¿???
Korkor K-a 2014-08-15 13:52:47
    hi.... how do i add navigation arrows in addition to the tabs please?
asagfg 2015-01-02 15:11:54
    does anyone know how to change the height of the carousel
onkar 2015-03-03 06:35:41
    do not add active class in menues
Equinox e Services 2015-03-31 12:01:25
    very nice tools, wish it could be used without any backlinks - Team @equinoxesin
Daniel S 2015-06-16 12:38:55
    This is a bit cleaner and will work better on next cycles:
freddy 2015-07-31 10:08:37
    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
Nuno Sarmento 2015-08-24 10:04:03
    Thank you for this article - Is there any way to have the tabs on the left vertical
Ron Killaars 2015-12-03 08:35:50
    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?
vannquish 2016-03-17 22:47:47
    doesnt work on the latest release of Bootstrap
Lemony 2016-07-15 08:26:31
    Great code! Thanks!! I tried adding previous and next button controls but only works up to the last tab (active tab).
Kleyton 2016-10-08 05:48:59
    Why not chage with HOVER?
Sai Kumar 2016-10-25 05:48:06
    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
Erdal Gözüm 2017-03-11 07:09:22
    www.harunyahya.com
Vyprazany Karfiol 2017-03-15 12:04:42
    Thanks, i love it a lot
Vyprazany Karfiol 2017-03-15 12:20:30
    I would like to ask about responsivity, on phone version it need too much margin-top, od i did something wrong?
Vyprazany Karfiol 2017-03-15 14:54:08
    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

Commenting will be back soon.