按列表项引导旋转木马控制

Bootstrap Carousel Control By List Items

本文关键字：旋转木马 控制 列表      更新时间：2023-09-26

我的问题是关于如何通过列表项控制引导旋转木马。

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

这里是carousel内容

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


…
…
…

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

如果你把它放在你的carousel中，它就会工作。好吧，只要你有引导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'时，点击事件将触发下一个图像的动画。

相关文章：