如何在Slick.js中创建具有图像预览功能的缩略图旋转木马？

<div id="carousel">
  <img src="thumbnail1.jpg" alt="Thumbnail 1">
  <img src="thumbnail2.jpg" alt="Thumbnail 2">
  <img src="thumbnail3.jpg" alt="Thumbnail 3">
  <!-- 添加更多缩略图 -->
</div>

$(document).ready(function(){
  $('#carousel').slick({
    slidesToShow: 4, // 设置同时显示的缩略图数量
    slidesToScroll: 1, // 每次滚动的缩略图数量
    asNavFor: '#preview', // 设置关联的图像预览容器的ID
    centerMode: true, // 启用居中模式
    focusOnSelect: true // 点击缩略图时聚焦
  });
});

<div id="preview">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 添加更多图像 -->
</div>

$(document).ready(function(){
  $('#preview').slick({
    slidesToShow: 1, // 设置同时显示的图像数量
    slidesToScroll: 1, // 每次滚动的图像数量
    asNavFor: '#carousel', // 设置关联的缩略图容器的ID
    arrows: false, // 隐藏导航箭头
    fade: true // 使用淡入淡出效果
  });
});