使用Slick Carousel同步图像

问题描述

基本上，我为此https://kenwheeler.github.io/slick/使用了https://arlibera.ma/Apoxer/main.html

我已经阅读了Slick文档，确实有一个同步选项，但仅在另一张幻灯片上可用。 是否可以链接要与幻灯片一起显示的图像？

谢谢。

幻灯片的JS代码：

$(function(){ 
        
$('.center').slick({
    centerMode: true,centerPadding: "0px",slidesToShow: 8,arrows:false,autoplay:false,infinite:false,responsive: [
      {
        breakpoint: 768,settings: {
          arrows: false,centerMode: true,centerPadding: '40px',slidesToShow: 3
        }
      },{
        breakpoint: 480,slidesToShow: 1
        }
      }
    ]
  });
  
});

解决方法

您可以使用afterChange()和beforeChange()事件来触发所需的任何JavaScript。例如，您可以编写函数来切换其他图像以使其显示如下：

HTML

<img id="image0" class="hero-image" src="..." />
<img id="image1" class="hero-image" src="..." />
<img id="image2" class="hero-image" src="..." />

CSS

// Hide all images to start
.hero-image {
  display: none;
}

JavaScript

// Show the current slide's corresponding image after the slide is shown
$('.center').on('afterChange',function(event,slick,currentSlide){
  $('.hero-image').hide();
  $(`image${currentSlide}`).show();
});