Jquery - Elastislide stop sliding when mouse overing

Question

I'm using ELASTISLIDE – A RESPONSIVE JQUERY CAROUSEL PLUGIN The plugin works perfectly on my site. but i need to stop sliding when mouseover

Below code for autoplay sliding

// autoplay true || false
autoplay : true,

and

if(this.options.autoplay == true){
            var translation = 0;
            // width/height of an item ( <li> )
            var itemSpace = this.options.orientation === 'horizontal' ? this.$items.outerWidth( true ) : this.$items.outerHeight( true );
            // total width/height of the <ul>
            var totalSpace = this.itemsCount * itemSpace;
            // visible width/height
            var visibleSpace = this.options.orientation === 'horizontal' ? this.$carousel.width() : this.$carousel.height();
            //slide auto
            window.setInterval(function(){
                //test if we should go to next slide or return to first slide
                if(totalSpace > translation + visibleSpace)
                {
                    //go to next slide
                    self._slide('next');
                    //update translation
                    translation += visibleSpace;
                }
                else
                {
                    //return to first slide
                    self._slideTo(0);
                    //set translation to 0
                    translation = 0;
                }
            }, 7000);
        }

Thanks for helping

Answer 1

1: Add variable for timer..

var slide_timer; // Add variable to component

2: move window.setInterval part to own function (startAutoslide) and assign value to slide_timer in that like:

slide_timer = window.setInterval(function()...

3: Add onmouseover and onmouseout listeners for component. In mouseover call clearInterval(slide_timer) and in onmouseout call startAutoslide.