2

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?

unor
  • 92,415
  • 26
  • 211
  • 360

1 Answers1

0

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 !!!

pascarel
  • 15
  • 6
  • 1
    While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – kayess Apr 10 '17 at 13:07