CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Hue
Hue

Reputation: 471

Twitter Bootstrap Carousel inside tabs

I am trying to create 3 tabs in Twitter Bootstrap, and inside each tab is a different slideshow. At the moment, the first slidehow plays, however the other slideshows don't function. I realise this is to do with a conflict between the two and hiding content. I have seen similar posts but can't find a solution, and would really appreciate any help to get it functioning.

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#industrial">Industrial</a></li>
    <li><a href="#digital-tech">Digital/Tech</a></li>
    <li><a href="#finance-professional">Finance/Professional</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="industrial">
        <div id="myCarousel1" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=1a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=1b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=1c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>

    <div class="tab-pane" id="digital-tech">
        <div id="myCarousel2" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=2a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=2b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=2c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <div class="tab-pane" id="finance-professional">
        <div id="myCarousel3" class="carousel slide">
            <div class="carousel-inner">
                <div class="active item"><img src="http://placehold.it/350x150&text=3a"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=3b"></div>
                <div class="item"><img src="http://placehold.it/350x150&text=3c"></div>
            </div>
            <a class="carousel-control left" href="#myCarousel" data-slide="prev"> </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>        
        </div>
    </div>
</div>

Upvotes: 1

Views: 2536

Answers (1)

kai
kai

Reputation: 11

think you should add data-toggle="tab" to the <li> <a> tags like 

<li><a data-toggle="tab" href="#digital-tech">Digital/Tech</a></li>

tabbing and slider will work

Upvotes: 1

Related Questions