當鼠標位於頁面的左側或右側時，移動滑動滑塊庫

我想讓我的畫廊向左移動，當鼠標位於頁面的左側並向右移動時，它位於頁面的右側頁。這是JSFiddle。我試圖使用懸停功能，但它不起作用。鼠標移動似乎只在將鼠標移動到頁面的左側或右側時才起作用，而鼠標移動似乎只有在再次移動鼠標時才起作用。當鼠標靜止時（在頁面的左側或右側）或移動時，我希望它仍然移動（向左或向右）。當鼠標位於頁面的左側或右側時，移動滑動滑塊庫

$('.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>

來源

2017-05-07 Dino

設置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>

來源

2017-05-07 12:30:30

Shridar它仍然是做同樣的事情。當鼠標位於左側時，即使鼠標靜止，我也希望畫廊向左移動。與右側相同。我希望這更詳細地闡述。 – Dino

即使鼠標靜止，您也希望幻燈片移動。所以即使你mouseOver，幻燈片仍然移動。你希望幻燈片繼續移動不是嗎？ –

正確，因此當用戶將鼠標移動到左側或將鼠標留在左側時，畫廊應向左移動。右側也是一樣。 – Dino

當鼠標位於頁面的左側或右側時，移動滑動滑塊庫

回答

相關問題