I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it.
I've experimented with all the options available on the owl slider, such as autoplayHoverPause:true, as mentioned in the documentation, and even tried editing the custom code. However, it seems there may be a conflict with the autoPlaySpeed setting.
You can view the working slider on this CodePen link.
There's a function around line 2511 that handles hover pausing, but my attempts to modify it have been unsuccessful.
I also attempted the following without success:
$('.owl-carousel').mouseover(function(){
owl_product.trigger('stop.owl.autoplay');
})
$('.owl-carousel').mouseleave(function(){
owl_product.trigger('play.owl.autoplay',[1000]);
})
Another attempt that did not work was:
'mouseleave.owl.autoplay': $.proxy(function() {
if (this._core.settings.autoplayHoverPause && this._core.is('rotating')) {
this.stop(); // Quick fix for resume play on mouseleave
this.play();
}
}, this),
I would greatly appreciate any help, as I feel like I'm starting to lose my mind over this issue.