Javascript 修复slick carousel中的缩略图问题

我想在光滑的旋转木马上显示缩略图。这是我的初始化代码：

$('.regular').each(function() {
  var $this = $(this);
  if ($this.children().length > 1) {
    $this.slick({
      dots: true,
      arrows: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      navs: true,
      customPaging: function(slider, i) {
        return '<div class="thumbnails">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</div>';
      }
    });
  }
});

$（'.regular'）。每个（函数（）{
var$this=$（this）；
如果（$this.children（）.length>1）{
美元这个，滑头({
点：是的，
箭头：是的，
无限：是的，
幻灯片放映：1，
幻灯片滚动：1，
海军：是的，
自定义分页：函数（滑块，i）{
返回'+$（slider.$slides[i]）。查找（'img'）.prop（'outerHTML'）+''；
}
});
}
});

在这里，我尝试在列表中显示图像（如图所示）

有没有办法将图像显示为旋转木马，以便仅显示前4个缩略图

Html代码：

<section class="regular slider">
     <?php if(!empty($product->images) && $images[0]->published !== 0) {
         $start_image = VmConfig::get('add_img_main', 1) ? 0 : 1;
         for ($i = 0; $i < count($product->images); $i++) {
         $image = $product->images[$i];
     ?>

    <div class="item">
         <img  src=<?php echo' "'.JURI::root().$image->file_url.'"   '?>
               alt=<?php echo' "'.$image->file_title.'"   '?>
               data-thumb= '<img src=<?php echo'  "'.JURI::root().$image- 
               >file_url.'" '?>/>'   
          />                                 
    </div>
         <?php   }      
                     }  ?>
 </section >

文件“”url。“”？>
alt=
数据拇指='file_url.'“？>/>”
/>                                 

---

谢谢

你的HTML在哪里？好的，谢谢，我已经更新了cod并添加了它的HTML cod。你的导航代码在哪里？你为slick写的代码，导航代码也需要写。没有导航代码，我只在html和js上使用了上面的代码。你的html在哪里？好的，谢谢，我已经更新了代码并添加了它的html代码。你的导航代码在哪里？你为slick编写的代码，也需要为navs编写这种代码。没有navs代码，我只在html和js上使用了上面的代码。。