Edit in JSFiddle

$(function(){
    
    var $slider = $(".slider").slick();
    
    var scroll,
        speed = 1000;
    
    var stop = function() {
      clearInterval( scroll );
    }
    
    var rw = function() {
      stop();
      $slider.slick("slickPrev");
      scroll = setInterval( function() {
         $slider.slick("slickPrev");
      }, speed );
    };
    
    var fw = function() {
      stop();
      $slider.slick("slickNext");
      scroll = setInterval( function() {
         $slider.slick("slickNext");
      }, speed );
    }
    
    $("body").on("mouseenter", ".slick-next", fw);
    $("body").on("mouseenter", ".slick-prev", rw);
    $("body").on("mouseleave", ".slick-next, .slick-prev", stop);

}());

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
</section>

.slick-slide {
    background: skyblue;
    color: white;
    padding: 30px;
    font-size: 30px;
    font-family: "Arial";

}

.slick-slide:nth-child(1),
.slick-slide:nth-child(3),
.slick-slide:nth-child(5),
.slick-slide:nth-child(7),
.slick-slide:nth-child(9),
.slick-slide:nth-child(11) {
     background: teal;
}

.slick-prev,
.slick-next {
    width: 50%;
    display: block;
    position: absolute;
    top: 100px;
    height: 50px;
}

.slick-next { 
    left: 50%;
}