更改悬停指示器上的幻灯片答案

【问题标题】：Change slide on hover indicators更改悬停指示器上的幻灯片
【发布时间】：2015-08-29 11:57:24
【问题描述】：

我正在开发引导轮播并想更改悬停指示器上的幻灯片。我怎样才能做到？JSFiddle

.carousel-inner img {
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide">
   <!-- Carousel indicators -->
   <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>
   </ol>   
   <!-- Carousel items -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="http://placehold.it/400x200&text=1" alt="First slide">
      </div>
      <div class="item">
         <img src="http://placehold.it/400x200&text=2" alt="Second slide">
      </div>
      <div class="item">
         <img src="http://placehold.it/400x200&text=3" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
</div>

【问题讨论】：

标签： jquery twitter-bootstrap carousel

【解决方案1】：

你可以尝试trigger()鼠标悬停点击事件。

$('.carousel-indicators  li').on('mouseover',function(){
    $(this).trigger('click');
})

.carousel-inner img {
   margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel indicators -->
  <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>
  </ol>   
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/400x200&text=1" alt="First slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/400x200&text=2" alt="Second slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/400x200&text=3" alt="Third slide">
    </div>
  </div>
  <!-- Carousel nav -->
</div>

【讨论】：