Question

我的问题是如何按列表项控制bootstrap轮播。

我有三个以上的列表项。每个列表项都具有旋转木马区域内的内容。我想要的是通过单击列表项来控制这些内容，列表项是这些内容的标题。我认为这可以通过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>

       ...
       ...
       ...

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

Answer 1

如果你把它放在你的旋转木马里，它会起作用。好吧，只要你有bootstrap 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”时，会发生点击事件以触发动画到下一张图片。

按列表项控制Bootstrap Carousel

1 个答案: