使用 Slick Carousel 同步图像

Question

基本上我正在使用 https://kenwheeler.github.io/slick/

我已阅读 Slick 文档，确实有一个同步选项，但仅适用于另一张幻灯片。是否可以 link 图片与幻灯片一起显示？

提前谢谢你。

幻灯片的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,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      }
    ]
  });
  
});

Answer 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();
});

使用 Slick Carousel 同步图像

Sync images with Slick Carousel

javascript

html

css

frontend

slick.js