Question

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

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>

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

1 个答案: