Bootstrap Carousel Control By List Items答案

【问题标题】：Bootstrap Carousel Control By List ItemsBootstrap Carousel Control By List Items
【发布时间】：2014-07-20 07:58:03
【问题描述】：

我的问题是关于如何通过列表项控制引导轮播。

我有三个以上的列表项。每个列表项在轮播区域内都有一个内容。我想要的是通过单击作为这些内容标题的列表项来控制这些内容。我认为这可以通过 jquery 来实现，但我找不到任何示例。这是我的意思更清楚。

这是我的列表项。

<div  class="sub-menu-list"style="position:absolute">
<ul style="display:inline;">
         <li><a href="#purpose-content">purpose</a></li>
         <li><a href="#chronology-content">chronology</a></li>
         <li><a href="#services-content">services</a></li>
         <li><a href="#contact-content">contact</a></li>
</ul>

这里是轮播内容

<div class="carousel-inner">
<div class="item active" id="purpose-content">    
   ... 
</div>

...
...
...

点击列表项时如何查看每个轮播内容？例如我在联系页面并单击年表链接，它应该自动向后或向前滑动两次以查看年表内容。

【问题讨论】：

标签： javascript jquery twitter-bootstrap controls carousel

【解决方案1】：

如果你把它放在你的轮播中，它就会起作用。只要你有引导 css/js 文件和 jquery。所有这些都将处理不同图像之间的动画幻灯片。

<div class="carousel" id="myCarousel">
 <div class="inner-carousel" data-interval="3000" data-ride="carousel">
  <div class="item active">
         <!-- example of what goes in here -->
         <img src="img.jpg">
         <div class="carousel-caption">title</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
</div>

为了完全回答您的问题，当您点击“li”时，将发生触发动画到下一张图片的 on click 事件。

【讨论】：