Question

我使用光滑的滑块显示桌面网站及其移动网站的屏幕截图。

是否有链接/延迟两个滑块以便移动屏幕仅在桌面屏幕更改后发生变化？

我似乎无法继续改变工作。

继承我的代码：

<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）。

链光滑滑块在一起

1 个答案: