如何通过单击网页上的超链接来切换引导轮播中的项目？答案

【问题标题】：How can I switch items in bootstrap carousel by clicking a hyperlinks on webpage?如何通过单击网页上的超链接来切换引导轮播中的项目？
【发布时间】：2016-01-24 05:11:29
【问题描述】：

我有一个像这样http://jsfiddle.net/roxds51h/2/ 的小提琴 - 有一个带有嵌入式旋转木马的 macbook pro，其中包含两张图片。用户可以通过点击屏幕上的白点来切换图片。我想通过点击下面的文字删除这些点并提供更改图片的可能性：

<div class="row">
    <div class="col-sm-6">
            here is one text //after clicking that 
                             //the first picture should
                             //appear on macbook

    </div>
    <div class="col-sm-6">
            here is second text //after clicking that 
                                //the second picture should
                                //appear on macbook
    </div>
</div>

我该怎么做？此外，现在图片每隔几秒钟就会自动更改一次 - 我该如何禁用它？谢谢！

【问题讨论】：

标签： javascript jquery css twitter-bootstrap carousel

【解决方案1】：

您可以使用以下代码轻松实现：

<div class="row">
  <div class="col-sm-6" data-target="#17" data-slide-to="0">
    here is one text
  </div>
  <div class="col-sm-6" data-target="#17" data-slide-to="1">
    here is second text
  </div>
</div>

要禁用自动播放，请将 data-interval="5000" 更改为 data-interval="false"。

<div id="17" class="carousel slide" data-interval="false" data-ride="carousel">

去除白点：

从 HTML 中删除它们，我的意思是这段代码：

<ol class="carousel-indicators">
  <li data-target="#17" data-slide-to="0" class=""></li>
  <li data-target="#17" data-slide-to="1" class="active"></li>
</ol>

【讨论】：

谢谢！你也知道怎么去除白点吗？
去掉<ol class="carousel-indicators"></ol>来去除白点，查看上面的CodePen进行演示。

【解决方案2】：

您需要交换数据目标并扭曲<a></a> 标签中的文本。

HTML：

<section class="introSection">
   <!-- Container -->
   <div class="container macbook">
      <div class="row">
            <div align="center">
               <img alt="" src="http://www.proalab.com/assets/macbookpro.png" class="mackbook_image">
            </div>
            <div class="mackbook">
               <div id="17" class="carousel slide" data-interval="5000" data-ride="carousel">
               <div class="carousel-inner">
                     <div class="item">
                           <img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz1.png" style="display: block;">
                     </div>
                     <div class="item active">
                           <img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz2.png">
                     </div>
                  </div>
            </div>
         </div>
      </div>
   </div>

 <div class="row">
   <div class="col-sm-6">
         <a href="#" data-target="#17" data-slide-to="0">here is one text</a>

   </div>
   <div class="col-sm-6">
         <a href="#" data-target="#17" data-slide-to="1" class="active">here is second text</a>
   </div>
</div>
</section>

CodePen Demo

【讨论】：