add pause on hover in jquery

Question

i cant seem to add a pause on mouse hover to this slide show code , any help will be greatly appreciated

    <script type="text/javascript">
        $(function() {

            var jmpressOpts = {
                animation       : { transitionDuration : '1.8s' }
            };

            $( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
                autoplay    : true,
                dots        : false,
                arrows      : false,
                interval    : 8000
            }));

        });
    </script>

Answer 1

I don't know how jmslideshow works but try setting the interval to a variable of your choice and then change that variable to a really large number on .mouseover and back to 8000 on .mouseout

or maybe you can do the same thing with autoplay, set it to false on .mouseover, true on .mouseout

Answer 2

Please check my answer here: https://stackoverflow.com/a/19830616/2519089

You will need to modify the jquery.jmslideshow.js file and include the following lines within the _loadEvents method:

//custom hover handler
this.$jmsWrapper.on( 'mouseenter', function( e ) {
    _self._stopSlideshow();
});

this.$jmsWrapper.on( 'mouseleave', function( e ) {
    _self.options.autoplay  = true;
    _self._startSlideshow();
});

Hope this helps!