将光滑的滑块链接在一起

Question

我正在使用灵活的滑块来显示桌面网站及其移动网站的屏幕截图。

有没有chain/delay两个滑块，让移动屏幕只在桌面屏幕改变后改变？

我似乎无法让 afterChange 工作。

这是我的代码：

<div class="case-screens">
   <div class="screen-desktop-wrapper">
      <div class="screen-desktop-slider">
         <div>1<img src="gfx/references/screen_desktop_scout_01.jpg">
         </div>
         <div>2<img src="gfx/references/screen_desktop_scout_01.jpg">
         </div>
         <div>3<img src="gfx/references/screen_desktop_scout_01.jpg">
         </div>
      </div>
      <img src="gfx/references/screen_desktop.png" class="desktop-frame">
   </div>
   <div class="screen-mobile-wrapper">
      <div class="screen-mobile-slider">
         <div>1<img src="gfx/references/screen_mobile_scout_01.jpg">
         </div>
         <div>2<img src="gfx/references/screen_mobile_scout_01.jpg">
         </div>
         <div>3<img src="gfx/references/screen_mobile_scout_01.jpg">
         </div>
      </div>
      <img src="gfx/references/screen_iphone.png" class="mobile-frame"> 
   </div>
</div>

光滑的滑块

$('.screen-desktop-slider').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1500,
    accessibility: false,
    arrows:false,
    pauseOnHover:false,
    easing:'easeOutQuart',
    fade: true
});

$('.screen-mobile-slider').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 1500,
    accessibility: false,
    arrows:false,
    pauseOnHover:false,
    easing:'easeOutQuart',
    fade: true
});

Answer 1

首先，将 autoplay: false 设置为移动滑块并删除 autoplaySpeed 设置。然后您需要像这样调用 afterChange 事件：

$('.screen-desktop-slider').on('afterChange', function(event, slick, currentSlide){
    $('.screen-mobile-slider').slick('slickGoTo', currentSlide, false);
});

currentSlide 参数表示当前幻灯片的索引。因此，如果您想更改移动设备的滑块幻灯片，请调用 slickGoTo 方法以提供要转到的幻灯片索引。 slickGoTo的第二个参数我设置为false表示是否要动画。如果你想要动画，你可以省略它（默认值为true）。

将光滑的滑块链接在一起

Chain slick sliders together

html

jquery

slick.js