使用bootstrap 3在旋转木马内连接旋转木马

Question

如果措辞严厉，请原谅我，但我会尽我所能。使用Bootstrap 3，我有一个成功使用指标的大型轮播。但是，我还想添加一种更新的侧边栏，以显示当前未设置为active的所有幻灯片。点击任何这些侧边栏标签后，active幻灯片以及带有新inactive幻灯片的侧边栏标签都会更新。

点击与幻灯片3 ...

相关联的任何元素后，将更改为下面的布局

目前，点击其中一个元素会更新active幻灯片以及指示符，但侧边栏标签列表保持不变。

是否有一种使用jQuery和data-*属性的简单方法来将选项卡列表滑动为仅显示inactive个元素？

我遇到的唯一类似解决方案this other stack overflow question

Some code

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>