Slick.js

Question

我在单个页面上使用 Slick (https://kenwheeler.github.io/slick/) 创建了多个轮播。它们都具有相同的 class 和设置（主要是无限自动播放），但它们会在不同的时间内发生变化。我无法同步它们。

$(document).ready(function() {
  $('.slick').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false
  });
});

.slick {
  margin: 0 auto;
  max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
</head>

<body>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <div class="slick">
    <img src="https://picsum.photos/200/300" alt="">
    <img src="https://picsum.photos/200/301" alt="">
    <img src="https://picsum.photos/200/302" alt="">
    <img src="https://picsum.photos/200/303" alt="">
  </div>

  <div class="slick">
    <img src="https://picsum.photos/200/304" alt="">
    <img src="https://picsum.photos/200/305" alt="">
    <img src="https://picsum.photos/200/306" alt="">
    <img src="https://picsum.photos/200/307" alt="">
  </div>

  <div class="slick">
    <img src="https://picsum.photos/200/308" alt="">
    <img src="https://picsum.photos/200/309" alt="">
    <img src="https://picsum.photos/200/310" alt="">
  </div>

</body>

</html>

我可以做些什么让它们保持同步吗？

Answer 1

一个解决方案是将第一个幻灯片设置为自动播放，并通过设置 asNavFor 属性来控制其他幻灯片。当第一个幻灯片改变时，它会立即改变另外两个。

使用此方法的唯一问题是它要求幻灯片具有相同数量的幻灯片，否则它可能无法轮换所有幻灯片（如果控制幻灯片较少）或显示最后一张幻灯片超过一次（如果控制幻灯片有更多）。

$(document).ready(function(){
  $('.slick1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false,
    asNavFor: '.slick2'
  });  
  $('.slick2').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    pauseOnHover: false
  });
});

.slick {
  margin: 0 auto;
  max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
</head>

<body>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <div class="slick slick1">
    <img src="https://picsum.photos/200/300" alt="">
    <img src="https://picsum.photos/200/301" alt="">
    <img src="https://picsum.photos/200/302" alt="">
    <img src="https://picsum.photos/200/303" alt="">
  </div>

  <div class="slick slick2">
    <img src="https://picsum.photos/200/304" alt="">
    <img src="https://picsum.photos/200/305" alt="">
    <img src="https://picsum.photos/200/306" alt="">
    <img src="https://picsum.photos/200/307" alt="">
  </div>

  <div class="slick slick2">
    <img src="https://picsum.photos/200/308" alt="">
    <img src="https://picsum.photos/200/309" alt="">
    <img src="https://picsum.photos/200/310" alt="">
    <img src="https://picsum.photos/200/311" alt="">
  </div>

</body>

</html>

另一种解决方案是使用 beforeChange 事件让第一张幻灯片触发其他两张幻灯片的下一张幻灯片。无论每张幻灯片中有多少张幻灯片，此版本都可以使用。

$(document).ready(function(){
  $('.slick1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false
  });  
  $('.slick2').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    pauseOnHover: false
  });
  
  // First slideshow triggers the other two to change
  $('.slick1').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slick2').slick('slickNext');
  });

});

.slick {
  margin: 0 auto;
  max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
</head>

<body>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <div class="slick slick1">
    <img src="https://picsum.photos/200/300" alt="">
    <img src="https://picsum.photos/200/301" alt="">
    <img src="https://picsum.photos/200/302" alt="">
    <img src="https://picsum.photos/200/303" alt="">
  </div>

  <div class="slick slick2">
    <img src="https://picsum.photos/200/304" alt="">
    <img src="https://picsum.photos/200/307" alt="">
  </div>

  <div class="slick slick2">
    <img src="https://picsum.photos/200/308" alt="">
    <img src="https://picsum.photos/200/309" alt="">
    <img src="https://picsum.photos/200/310" alt="">
  </div>

</body>

</html>

Slick.js - 多个轮播在自动播放时不同步

Slick.js - multiple carousels are not synchronized on autoplay

javascript

jquery