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.

enter image description here

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

enter image description here

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

some code

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

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -