Owl Carousel 2 - can't change slide on hover

Question

I already tried to swap the functions on owl.carousel.js but it only works when the mouse moves.

var Autoplay = function(scope) {
this.core = scope;
this.core.options = $.extend({}, Autoplay.Defaults, this.core.options);

this.handlers = {
    'translated.owl.carousel refreshed.owl.carousel': $.proxy(function() {
        this.autoplay();
    }, this),
    'play.owl.autoplay': $.proxy(function(e, t, s) {
        this.play(t, s);
    }, this),
    'stop.owl.autoplay': $.proxy(function() {
        this.stop();
    }, this),
    'mouseover.owl.autoplay': $.proxy(function() {
        if (this.core.settings.autoplayHoverPause) {
            this.pause();
        }
    }, this),
    'mouseleave.owl.autoplay': $.proxy(function() {
        if (this.core.settings.autoplayHoverPause) {
            this.autoplay();
        }
    }, this)
};

this.core.$element.on(this.handlers);};

Any idea how to make the slideshow work when mouse on top of the image?

Answer 1

When i had this problem, i used this code:

$('.owl-carousel .owl-dot').hover(function() {
$(this).click();
},
function() {}
);

and here my css for dots:
.owl-dot{
position: relative;
padding: 0;
height: 3px;
margin: 0;
float: left;
}
.owl-dot:before{
content: "";
position: absolute;
top: -168px;
// the height of image height: 168px;
// the height of image width: 100%;
left: 0;
z-index: 0;
}

when you will make hover to dots the image will be changing, that's all !!!