Iisakki Ronkainen
Iisakki Ronkainen

Reputation: 21

Bootstrap 4 carousel play only on hover

is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mouseenter it starts to cycle the carousel and on mouseleave it pauses. Thanks!

EDIT:

So here's the code:

<div id="myCarousel" class="carousel carousel-fade">
  <div class="carousel-inner embed-responsive embed-responsive-21by9">
    <?php tuote_kuvat( '_tuote_img', 'full' ) ?>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script>
$(document).ready(function(){

  $("#myCarousel").carousel({
    interval: 1000,
    pause: true;
  });

  $('#myCarousel').hover(function(){
     $("#myCarousel").carousel('cycle');
  },function(){
     $("#myCarousel").carousel('pause');
  });

});
</script>

I'm quite inexperienced with javascript, so is it possible, that I'm implementing those carousel methods wrong? The javascript on my code does nothing.

Thank you for your contribution so far, this problem is making me mad.

Upvotes: 1

Views: 1310

Answers (1)

Bhoomi
Bhoomi

Reputation: 537

Try the below code in which replace Yourcontainer and Carousel element with your elements.

$('#Yourcontainer').hover(function(){
   $("#Carousel").carousel('cycle');
},function(){
   $("#Carousel").carousel('pause');
});

Upvotes: 1

Related Questions