마우스 오버 시 슬라이드 멈춤 효과

$(function(){
 n=1  
 $('.btn1').addClass('active') /*--동그라미가 선택될 때 빨간점으로--*/
 
 $('').mouseover(function(){
  n+=1 /*--1씩 증가--*/
  if(n==5){ /*--6번째가 될 때에는 (n=11로 돌아감)--*/
   n=1
  }
  $('.gallery li').fadeOut()//hide()
  $('.img'+n).fadeIn()//show()
  
  $('.btngrp   li').removeClass('active')
  $('.btn'+n).addClass('active')
 })//next End 
  
 $('').mouseover(function(){
  n-=1
  if(n==0){
   n=4 /*--3장일 때는 3--*/
  }
  $('.gallery li').fadeOut()//hide()
  $('.img'+n).fadeIn()//show()
  
  $('.btngrp   li').removeClass('active')
  $('.btn'+n).addClass('active')
 })//prev End
 
 $('.btngrp   li').mouseover(function(){
  n = parseInt($(this).attr('data-n'))
  $('.gallery li').fadeOut(-10000)//hide()(이미지넘어가는시간)
  $('.img'+ n).fadeIn(-10000)//show() (이미지넘어가는시간)
  $('.btngrp   li').removeClass('active')
  $('.btn'+ n ).addClass('active')
 })
    
  
       
        setInterval(function runslide() {  
            n+=1
   if(n==5){
    n=1
   }
   $('.gallery li').fadeOut(-20000)//hide() /*--2000은 2초--*/ (이미지넘어가는 시간)
   $('.img'+n).fadeIn(-10000)//show() (이미지넘어가는시간)
   
   
   
   $('.btngrp   li').removeClass('active')
   $('.btn'+n).addClass('active')
           

         }, 6000); //(이미지가멈춰있는시간)
 

 $('.btngrp .btn1').click(function(){
  $('.box_01').animate({'bottom':0})
 })
 
 $('.btngrp01 .btn2').click(function(){
  $('.box_01').animate({'bottom':-460})
  })
  
 $('.btngrp01 .btn3').click(function(){
  $('.box_01').animate({'bottom':-920})
  })

 $('.btngrp01 .btn4').click(function(){
  $('.box_01').animate({'bottom':-1840})
  })

})

여기서 어떤 것을 수정하거나 추가해야

마우스 오버 시 슬라이드 이미지가 멈추는지 알려주세요 ㅠㅠ

​

​

​

​