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