javascript - Connecting carousel within a carousel using bootstrap 3 -
please forgive me if worded terribly, i'll best. using bootstrap 3, have large carousel works indicators. however, want add sort of sidebar updates show slides not set active. upon clicking on of these sidebar tabs, active slide updated, sidebar tabs newly inactive slide.

will change layout below, upon clicking on either of elements associated slide 3...

at moment, clicking on either of elements updates active slide indicator, sidebar tab list remains same.
is there simple way using jquery , data-* attributes slide tab list show inactive elements?
the similar solution 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 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>
Comments
Post a Comment