CODEWITHSUNDEEP
twitter-bootstraphovercarouselcycle
user2019304
user2019304

Reputation: 11

Bootstrap Carousel cycle on mouseenter and pause on mouseleave + interval

I would like to have the Bootstrap Carousel only cycle on:hover and pause once the mouse leaves. I'm using default Bootstrap code base. There will be multiple carousels on the page with this functionality.

I would also like to control the interval speed if possible. The data-interval attribute seems to not be working.

This piece of code almost works, but only the first time when the mouse hovers over the carousel. It does not work the second time and does not control the interval. 

<script>
  $(document).ready(function(){
    $('.carousel').mouseenter(function() {
        $(this).carousel('cycle');
    }).mouseleave(function() {
        $(this).carousel('pause');
    });
  });
</script>

Upvotes: 1

Views: 1757

Answers (1)

apeitup
apeitup

Reputation: 35

<script>
$(document).ready(function(){
  $(`.carousel`).on(`mouseenter`,function() {
  $(this).carousel('cycle');
  }).on(`mouseleave`, function() {
  $(this).carousel('pause');
  });
});
</script>

Just in case anyone else is looking for this solution.

Upvotes: 2

Related Questions