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.

Can you change the size of the thumbnail images?

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

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

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>

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

Thank you so much alex. super cool.

Brilliant! Thank you

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?

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

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

Thanks for this snippet, this is great.

How do i reduce the speed of the slide.

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.

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

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.

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?

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.

Thanks for this ! Really nice!

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

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

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

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

hard coded content...

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

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

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.

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

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.

How do i reduce the speed any option!!

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

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

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!!!!!!!!!

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!

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

How can i add arrow in testimonial slide

Thanks for this snippet, it looks amazing!

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.

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

this is great! thank you.

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