Hello.

Can you please tell me how to make the slides automatically change when you hover on a specific block?

Here for example here: http://www.bootply.com/SwVYsZx9dS

So that when you hover on blocks with Link 1, Link 2, Link 3, pictures change. In this case, so that the functions of a normal link are not lost, when clicked, these links work as links.

Thank.

    1 answer 1

    Use trigger() by 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>

    • Thank you very much, it turned out exactly what I wanted. - Mikhail A.
    • @MikhailA. If helped, click the check mark to the left of the answer. - user192664