当鼠标位于页面的左侧或右侧时，移动滑动滑块库

我想让我的画廊向左移动，当鼠标位于页面的左侧并向右移动时，它位于页面的右侧页。这是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

当鼠标位于页面的左侧或右侧时，移动滑动滑块库

回答

相关问题