Javascript 使用引导3在旋转木马内连接旋转木马

请原谅我，如果这是可怕的措辞，但我会尽我所能。使用Bootstrap3，我有一个大型旋转木马，可以成功地与指示器一起工作。但是，我还想添加一种侧边栏，用于更新以显示当前未设置为

活动的所有幻灯片。单击这些侧栏选项卡中的任何一个，将更新
活动的
幻灯片，以及带有新的
非活动的
幻灯片的侧栏选项卡


单击与幻灯片3关联的任一元素后，将更改为下面的布局


此时，单击任一元素都会更新
活动
幻灯片和指示器，但侧边栏选项卡列表保持不变

是否有一种简单的方法可以使用jQuery和
数据-*
属性来滑动选项卡列表以仅显示
非活动的
元素

我遇到的唯一类似的解决方案


HTML结构：

<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>