Как остановить карусель при наведение на нее мыши js?

var duration = 5000

//Обработка клика на стрелку вправо
$(document).on('click', ".carousel-button-right",function(){ 
    var carusel = $(this).parents('.carousel');
    right_carusel(carusel);
    return false;
});
//Обработка клика на стрелку влево
$(document).on('click',".carousel-button-left",function(){ 
    var carusel = $(this).parents('.carousel');
    left_carusel(carusel);
    return false;
});
function left_carusel(carusel){
   var block_width = $(carusel).find('.carousel-block').outerWidth();
   $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); 
   $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
   $(carusel).find(".carousel-items .carousel-block").eq(-1).remove();    
   $(carusel).find(".carousel-items").animate({left: "0px"}); 
   
}
function right_carusel(carusel){
   var block_width = $(carusel).find('.carousel-block').outerWidth();
   $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, duration, 'linear', function(){
      $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); 
      $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); 
      $(carusel).find(".carousel-items").css({"left":"0px"}); 
   }); 
}

$(function() {
    auto_right('.carousel:first');
})

function auto_right(carusel,handler){
    setInterval(function(){
        if (!$(carusel).is('.hover'))
            right_carusel(carusel);
    }, duration)
}

$(document).on('mouseenter', '.carousel', function(){
$('.carousel').find(".carousel-items").stop()
$(this).addClass('hover')
})
$(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})

<style>
  .p-smi{
    width: 100%;
    height: 130px;
    margin-left: 358px;
    background-color: #e8e8e8;
    margin-top: 69px;
    box-shadow: 0px 0px 12px 0px #000000;
    font-family: Calibri;
    font-size: 18pt;
    color: black;
    padding: 7px 0 0 0;
}
.carousel  {
     width: 100%;
    margin-left: -5px;
  }
.carousel-wrapper {

   overflow: hidden; 
   position:relative;
}
.carousel-items {
   width: 10000px; 
   position: relative; 
}
.carousel-block {
  float: left;
    width: 159px;
    background-color: blue;
    margin-left: 10px;
    padding: 10px 10px 10px 0px;
}
.carousel-block img{
    display:block;

}

/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
   width: 25px; 
   height: 36px; 
   position: relative;
   top: 80px; 
   cursor: pointer; 
   text-decoration:none;
}
.carousel-button-left a{
   float: left; 
   background: url(../images/carousel-left.png); 
}
.carousel-button-right a{
   float: right;
   background: url(../images/carousel-right.png); 
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel"> 
       <div class="carousel-button-left"><a href="#"></a></div> 
       <div class="carousel-button-right"><a href="#"></a></div> 
     <div class="carousel-wrapper"> 
        <div class="carousel-items"> 
         <div class="carousel-block">
           1
         </div>
         <div class="carousel-block">
           2
         </div>
         <div class="carousel-block">
           3
         </div>
         <div class="carousel-block">
           4
         </div>
         <div class="carousel-block">
           5
         </div>
         <div class="carousel-block">
           6
         </div>
         <div class="carousel-block">
           7
         </div>            
         <div class="carousel-block"> 
           8
         </div>
        </div>
     </div>
    </div>