マウスがページの左側または右側にあるときにスリックスライダーギャラリーを移動

Question

マウスがページの左側にあるときにギャラリーを左に移動させ、ページの右側にあるときに右に移動しようとしています。ページ。 ここにはJSFiddleがあります。ホバリング機能を使用しようとしましたが、機能しません。マウスオーバーは、マウスをページの左または右のいずれかに移動したときにのみ動作するように見え、マウスを再度動かすとmousemoveが機能するように見えます。マウスが静止している（ページの左右いずれかにある）とき、またはマウスを動かしたときに、マウスを動かして（左または右に）移動したい。

$('.carousel-one').on('mouseover', function(e) { 
 
    "use strict"; 
 
    var mouseSide; 
 
    if ((e.pageX - this.offsetLeft) < $(this).width()/2) { 
 
    $('.carousel-one').slickPrev(); 
 
    } else { 
 
    $('.carousel-one').slickNext(); 
 
    } 
 
}); 
 
$('.carousel-one').slick({ 
 
    arrows: true, 
 
    infinite: true, 
 
    speed: 500, 
 
    slidesToShow: 1, 
 
    centerMode: true, 
 
    variableWidth: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
 
<div class="carousel-one"> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> 
 
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> 
 
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> 
 
</div>

Answer 1

pauseOnHover: false,を設定します。お役に立てれば！

$('.carousel-one').on('mouseover', function(e) { 
 
    "use strict"; 
 
    var mouseSide; 
 
    if ((e.pageX - this.offsetLeft) < $(this).width()/2) { 
 
    $('.carousel-one').slickPrev(); 
 
    } else { 
 
    $('.carousel-one').slickNext(); 
 
    } 
 
}); 
 
$('.carousel-one').slick({ 
 
    arrows: true, 
 
    infinite: true, 
 
    pauseOnHover: false, 
 
    speed: 500, 
 
    slidesToShow: 1, 
 
    centerMode: true, 
 
    variableWidth: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
 
<div class="carousel-one"> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> 
 
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> 
 
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> 
 
</div>