如何使光滑的滑块连续自动播放，但在箭头/点单击时加快滚动速度？

Question

我想做一个滑块，它可以连续自动播放。它工作正常，但箭头和点看起来不能正常工作。我不确定应该更改哪些设置，但我希望滑块在单击箭头或点后立即滚动。

我尝试使用下面的代码更改一些设置，但似乎没有任何效果。

当

speed

设置为

6000

时，自动播放具有完美的时机，但在单击点/箭头后滚动时使用相同的慢速，并且这种行为是不需要的（它应该立即滚动到所选幻灯片）。您能帮助我了解我应该做什么才能实现我的目标吗？

$(document).ready(function(){
  $('.test').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1,
    speed: 6000,
    dots: true,
    cssEase: 'linear',
    waitForAnimate: false,
    pauseOnFocus: false, 
    pauseOnHover: false
  });
});

.slick-prev:before,
.slick-next:before 
{
    color: black!important;
}

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div style='margin-left:20px;width:200px;color:black!important;'>
    <div class='test'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>

Answer 1

某些 JS 选项可能无法与其他设置一起使用（就像在 SwiperJS 中一样），因此当您浏览每个添加的 JS 函数时，请注意它是否可能否定另一个早期的设置。 以下内容应该能让您走上正轨（作为示例）。

<section class="slider">
<div>
  <img src="https://via.placeholder.com/200x200.gif/?text=1">
</div>

<script type="text/javascript">
$('.slider').slick({
  dots: true,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 800,
  pauseOnFocus: false, 
  pauseOnHover: true
});
</script>

Answer 2

您可以通过更新平滑函数中的速度属性来修改箭头/点单击的过渡速度。这是 jQuery 中的示例：

$('.your-slider').slick({
  autoplay: true,
  autoplaySpeed: 6000,
  speed: 1000,
  dots: true,
  arrows: true,
});

$('.slick-arrow').on('click', function() {
  $('.your-slider').slick('slickSetOption', 'speed', 1000, true);
});

$('.slick-dots button').on('click', function() {
  $('.your-slider').slick('slickSetOption', 'speed', 1000, true);
});

此代码将自动播放速度设置为 6000 毫秒，但是当单击箭头或点时，它将转换速度更改为 1000 毫秒。您可以在单击箭头/点时将速度值调整为所需的过渡速度。