Javascript Slick Slider无法在PHP中使用循环

我尝试使用一个光滑的滑块，它在循环外工作良好，但在foreach循环中不工作。 这是没有循环的代码

      <div style="width: 120%; margin: 0 -10%;left: 0;  right:0;">
      <section class="center slider">
        <div>
          <img src="http://dev9.hostriplex.com/clearcube/wp-content/uploads/2019/04/CD5014_Front_view.png?text=1">
        </div>
        <div>
          <img src="http://dev9.hostriplex.com/clearcube/wp-content/uploads/2019/04/CD5012_Front_view-200.png?text=2">
        </div>
        <div>
          <img src="http://dev9.hostriplex.com/clearcube/wp-content/uploads/2019/04/CD5014_rear_view.png?text=3">
        </div>
        <div>
          <img src="http://dev9.hostriplex.com/clearcube/wp-content/uploads/2019/04/CD5014_Front_view.png?text=4">
        </div>
      </section>
    </div>
    <script src="slick.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">

     $(document).on('ready', function() {   

        $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1
      });

     });

 </script>

$（文档）.on（'ready'，function（）{
$（“.center”）.slick({
点：是的，
无限：是的，
centerMode：对，
幻灯片放映：3，
幻灯片滚动：1
});
});

它工作得非常好

但当我尝试在循环中转换它时，它停止工作。下面是带有循环的代码

 <div style="width: 120%; margin: 0 -10%;left: 0;  right:0;">
 <section class="center slider">
 <?php foreach ($thumbs_array as $thumbnail) { //Returning 3 iterations
 echo '<div><img src="' . $thumbnail . '"></div>';
 } ?>
</section>
</div>

我做错了什么？

尝试将$（document）.on（'ready'）…更改为

$（窗口）.on（'load'，function（）{

---

它将首先加载页面的所有内容，然后执行您的脚本。

是否有任何javascript错误？没有javascript错误。控制台是清晰的。是否显示图像？这是否“不起作用”？检查并检查图像路径是否正确呈现。

slidesToShow:3

和您的ret翻转迭代次数也是3次。所以，滑动滑块初始化但不滚动。如果迭代次数超过3次，它将滚动。