"Tabbed Slider Carousel (inspired by sevenx.de)"
Bootstrap 3.1.0 Snippet by alexhochart

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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-fluid"> <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x250" class="img-responsive"></div> <div class="col-md-9"> <h2>Slide 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x250" class="img-responsive"></div> <div class="col-md-9"> <h2>Slide 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x250" class="img-responsive"></div> <div class="col-md-9"> <h2>Slide 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <div class="item"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="http://placehold.it/350x250" class="img-responsive"></div> <div class="col-md-9"> <h2>Slide 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p> </div> </div> </div> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <div class="controls"> <ul class="nav"> <li data-target="#custom_carousel" data-slide-to="0" class="active"><a href="#"><img src="http://placehold.it/50x50"><small>Slide One</small></a></li> <li data-target="#custom_carousel" data-slide-to="1"><a href="#"><img src="http://placehold.it/50x50"><small>Slide Two</small></a></li> <li data-target="#custom_carousel" data-slide-to="2"><a href="#"><img src="http://placehold.it/50x50"><small>Slide Three</small></a></li> <li data-target="#custom_carousel" data-slide-to="3"><a href="#"><img src="http://placehold.it/50x50"><small>Slide Four</small></a></li> </ul> </div> </div> <!-- End Carousel --> </div>
body { padding-top:20px } #custom_carousel .item { color:#000; background-color:#eee; padding:20px 0; } #custom_carousel .controls{ overflow-x: auto; overflow-y: hidden; padding:0; margin:0; white-space: nowrap; text-align: center; position: relative; background:#ddd } #custom_carousel .controls li { display: table-cell; width: 1%; max-width:90px } #custom_carousel .controls li.active { background-color:#eee; border-top:3px solid orange; } #custom_carousel .controls a small { overflow:hidden; display:block; font-size:10px; margin-top:5px; font-weight:bold }
$(document).ready(function(ev){ $('#custom_carousel').on('slide.bs.carousel', function (evt) { $('#custom_carousel .controls li.active').removeClass('active'); $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active'); }) });

Related: See More


Questions / Comments:

How do I go about inserting text into the tabs while still keeping the full tab clickable? With the 50x50 placeholder image in the attribute tag the whole tab is clickable including the padding. But once you remove that only a sliver becomes clickable and the padding no longer is clickable. I just want to have simple text in the tab to explain what that item will be about.

Edit: Nevermind I'm dumb. I just had to replace all of them and the padding/active issues takes care of itself.

Josh Hurt () - 9 years ago - Reply 1


Can you change the size of the thumbnail images?

Maddog M Mystique () - 7 years ago - Reply 0


can you explain how to use it in wordpress by code (loop) please

Koko Mimi () - 7 years ago - Reply 0


can you explain how to use it in wordpress by code (loop) please

Koko Mimi () - 7 years ago - Reply 0


help me, how to creat an Mysql array?
<div class="container-fluid">
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="3000">

<div class="carousel-inner">

<div class="container-fluid">
<div class="row">
<div class="col-md-3"><img src="foto_produk/'.$r['gambar'].'" width="250" height="250" class="img-responsive"></div>
<div class="col-md-9">
<h2>'.$r ['nama_produk'].'</h2>

'.$r ['deskripsi'].'


</div>
</div>
</div>
</div>
';
}
?>

</div>

<div class="controls">
<ul class="nav">

<img src="foto_produk/'.$count['gambar'].'" width="50" height="50"/><small>'.$count['nama_produk'].'</small></li>
';
}
?>

</ul>
</div>
</div>

</div>

Reyy a-young () - 7 years ago - Reply 0


I'm new to this -- how do you stop the automatic sliding? thank you!

Drea Avellan () - 8 years ago - Reply 0


Thank you so much alex. super cool.

kamalakar () - 8 years ago - Reply 0


Brilliant! Thank you

hto () - 9 years ago - Reply 0


Data-interval no longer exists in the JS. How do I properly add it in to slow down the carousel while making sure the tabs rotate at the same time?

Chris Rouse () - 9 years ago - Reply 0


Thanks for the snippet. Active class is not working when I copy de code. Something missing? Thanks!!

Faloza () - 9 years ago - Reply 0


Excellent snippet. I am thinking to use it for one of my portfolio sections. Many thanks for sharing and keep up this great work :)

AZU () - 9 years ago - Reply 0


Thanks for this snippet, this is great.

Darshan () - 9 years ago - Reply 0


How do i reduce the speed of the slide.

Vikrant Cornelio () - 9 years ago - Reply 0


Hello Vikrant,
I'm pretty sure you've figurered it out already but just in case: data-interval="2500" (line 2). Change the 2500 milliseconds to your new value and you're done.

Alexandre HOCHART () - 9 years ago - Reply 0


how to add item? or is it only limited to 4?

Neue Aka () - 9 years ago - Reply 0


Try as many as you like. The control thumbnails will scroll horizontally in the container. I designed this simple BS slider for small screens and touch devices.

Alexandre HOCHART () - 9 years ago - Reply 0


Please tell me how to add this on my side (do i need to add only bootstrap.css or i need to make a new css n js file from this code) and need to add it in the page?

ayush6078 () - 9 years ago - Reply 0


You need to have Bootstrap + the code from this snippet. If you are registered and logged in you can download the whole snippet by clicking in the Cog Wheel menu next to Fork this button.

maxsurguy () - 9 years ago - Reply 0


Thanks for this ! Really nice!

Gaspard Rosay () - 9 years ago - Reply 0


how do you convert this to wordpress...Any help.

Chidi Nweke () - 9 years ago - Reply 0


That would not be too easy. Try this plugin instead: http://www.woothemes.com/fl...

maxsurguy () - 9 years ago - Reply 0


Thank you. But i need something i can hand code into wordpress with out a plugin

Chidi Nweke () - 9 years ago - Reply 0


How would you manage the content in the slider? Do you want it to display featured posts or just hard coded content?

maxsurguy () - 9 years ago - Reply 0


hard coded content...

Chidi Nweke () - 9 years ago - Reply 0


Then all you need to do is have Bootstrap CSS and the code of this snippet.

maxsurguy () - 9 years ago - Reply 0


I need an option where i can change, the slider content from the wordpress admin panel.

Chidi Nweke () - 9 years ago - Reply 0


For that you need to either create a Wordpress plugin from scratch or modify existing Carousel plugin, it's not easy because you need to know PHP, HTML, JS and CSS to do this.

maxsurguy () - 9 years ago - Reply 0


These codes never work for me. Do they only work when in a server or wht?

h8luv () - 9 years ago - Reply 0


You just need to have Bootstrap CSS included in your HTML document. Get it at http://getbootstrap.com and then you can use any of the snippets from this site.

maxsurguy () - 9 years ago - Reply 0


How do i reduce the speed any option!!

Vikrant Cornelio () - 9 years ago - Reply 0


Put a higher value in the data-interval attribute, or set it to false to stop the animation.

Ataww () - 9 years ago - Reply 0


this is great ...thank you for this snippet...

Aaditya Bhatta () - 9 years ago - Reply 0


This is ALMOST what i needed,maby this inspires me to make my own one.
What i was trying to find is ,make thumbs or links or buttons (does not mather) where on the left and right is an arrow, or simply slide with the mouse or finger over the thumbs to navigate to the wanted placeholder.With this version if more tabs then fit on screen it makes horizontal scrollbar.

But hey ...keep on coding!!!!!!!!!

Henry Withoot () - 10 years ago - Reply 0


Thanks for the snippet.

I've been playing with it a bit, and I am facing one problem.
When using carousel automatic sliding (eg: data-interval="5000"), how to "synchronize" tabs with their slide?
The slide animates properly but the tab doesn't move, creating confusion for the viewer.

thanks again!

Nils () - 10 years ago - Reply 0


Hey Nils,
I just slightly changed the javascript. Your problem's now solved.
Thanks for your relevant feedback !

Alexandre HOCHART () - 10 years ago - Reply 0


How can i add arrow in testimonial slide

Vishal Chand () - 8 years ago - Reply 0


Thanks for this snippet, it looks amazing!

maxsurguy () - 10 years ago - Reply 0


Well thanks Maks for creating and maintaining bootsnip. It's a very useful website for a web developer/designer like me! I should also thank bootstrap's folks too but that'll happen another time. Cheers.

Alexandre HOCHART () - 10 years ago - Reply 0


I'm glad to hear it's useful :) Bootsnipp has been a great passion of mine and it is a neat feeling knowing that so many people find it helpful. I'm creating an e-book that goes beyond bootstrap and expands on other front end components and libraries, check it out, it might me interesting to you or somebody you know: https://leanpub.com/frontend

maxsurguy () - 10 years ago - Reply 0


this is great! thank you.

FYI, I found some help in SO before you fixed it yourself (http://bit.ly/1nxKMk0)

Nils () - 10 years ago - Reply 0