修复轮滑中的缩略图问题

Question

我想在圆滑的转盘上显示缩略图。这是我的初始化代码：

$('.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>';
      }
    });
  }
});

在这里，我尝试在列表中显示图像（显示为here）。

有什么方法可以将图像显示为轮播，以便仅显示前4个缩略图图像？

Hdml Cod：

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

谢谢