1

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.

Iisakki Ronkainen
  • 21
  • 4
  • Yes - it just requires playing around with the [Carousel methods](http://getbootstrap.com/docs/4.0/components/carousel/#methods) – J. Titus Apr 06 '18 at 12:17
  • Where is the code? Please post it in the question. – Carol Skelly Apr 06 '18 at 12:22
  • I've re-opened this as [the dup](https://stackoverflow.com/questions/41061522/how-can-i-pause-a-bootstrap-carousel-on-hover-and-resume-it-on-mouse-out) from Bootstrap 3 doesn't work in Bootstrap 4. – Carol Skelly Apr 06 '18 at 12:52

1 Answers1

1

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

$('#Yourcontainer').hover(function(){
   $("#Carousel").carousel('cycle');
},function(){
   $("#Carousel").carousel('pause');
});
Bhoomi
  • 527
  • 2
  • 14
  • Soooo, I was putting the js in wrong place and when I put it to the right place (down to the very end of ) it started working. Sorry for the fuzz. Thanks for your help anyway! – Iisakki Ronkainen Apr 11 '18 at 10:17