Bootstrap Carousel смена слайдов при наведении на блоки

316

10 декабря 2016, 10:33

Здравствуйте.

Подскажите пожалуйста, как сделать так, чтобы слайды автоматически менялись при наведении на конкретный блок?

Вот например здесь: http://www.bootply.com/SwVYsZx9dS

Чтобы при наведении на блоки с Link 1, Link 2, Link 3 менялись картинки. При этом чтобы не потерялись функции обычной ссылки, при нажатии чтобы эти ссылки работали как ссылки.

Спасибо.

Answer 1

Используй trigger() по hover.

$('.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>