0

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

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

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

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

Спасибо.

1 ответ 1

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>

2
  • Большое спасибо, получилось именно то, что хотел.
    – Mikhail A.
    11 авг 2016 в 8:18
  • @MikhailA. Если помог, нажмите галочку, слева от ответа.
    – user192664
    11 авг 2016 в 8:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.