I recently implemented a bootstrap carousel on my website featuring one video and two images in the slides. A specific client request was to have the carousel auto slide for 3000ms, but stop sliding when the play button on the video is clicked. I attempted to fulfill this requirement with the following code snippet:
$(document).ready(function(){
$("#carouselMarsIndicators").click(function(){
$('.carousel[data-ride="carousel"]').attr('data-interval', 'false');
});
});
Unfortunately, I was unable to make it work as expected. The issue seems to be resolvable by adjusting for desktop screens when hovering over the carousel, but for mobile and tablet devices, a click function is necessary.