Please forgive me if this is worded terribly, but I'll do my best. Using Bootstrap 3, I have a large carousel that successfully works with the indicators. However, I also want to add a sort of sidebar that updates to show all slides that are not currently set to active. Upon clicking on any of these sidebar tabs, the active slide is updated, as well as the sidebar tabs with the newly inactive slide.
Will change into the layout below, upon clicking on either of the elements associated with slide 3...
At the moment, clicking on either of the elements updates the active slide as well as the indicator, but the sidebar tab list remains the same.
Is there a simple way using jQuery and the data-* attributes to slide the tab list to only show inactive elements?
The only similar solution I came across this other stack overflow question
HTML Structure:
<div class="container carousel-wrap">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators breadcrumbs">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<ol class="carousel-indicators tabs">
<li class="small orange" data-target="#carousel" data-slide-to="0" class="active"></li>
<li class="small red" data-target="#carousel" data-slide-to="1"></li>
<li class="small blue" data-target="#carousel" data-slide-to="2"></li>
<li class="small purple" data-target="#carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="jumbotron carousel orange" data-slide-to="0"></div>
</div>
<div class="item">
<div class="jumbotron carousel red" data-slide-to="1"></div>
</div>
<div class="item">
<div class="jumbotron carousel blue" data-slide-to="2"></div>
</div>
<div class="item">
<div class="jumbotron carousel purple" data-slide-to="3"></div>
</div>
</div>
</div>
</div>
