[Slick] [Jquery]-尝试使用Jquery添加动态图像时的Slip UI问题

Question

当我尝试使用jquery将图像添加到slick时，遇到了slick和jquery的问题。下面是我的jquery代码：

product_image.forEach(function(value) {
    $('#product-main-img').append(
        `<div class="product-preview">
            <img src="`+ value +`" alt="">
        </div>`
    );
    $('#product-imgs').append(
        `<div class="product-preview">
            <img src="`+ value +`" alt="">
        </div>`
    );
})

$('#product-main-img').slick({
    infinite: true,
    speed: 300,
    dots: false,
    arrows: false,
    fade: true,
    asNavFor: '#product-imgs',
});

$('#product-imgs').not('.slick-initialized').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    centerMode: true,
    focusOnSelect: true,
    centerPadding: 0,
    vertical: false,
    asNavFor: '#product-main-img',
        responsive: [{
        breakpoint: 991,
        settings: {
                vertical: false,
                arrows: false,
                dots: false,
           }
        },
    ]
});

在html中，我使用ID为＃product-main-img和＃product-imgs的标签来显示我的滑块。但是，标记＃product-main-img正常工作，但＃product-imgs无效。 This is the image which has some problem.

*注意：我不知道为什么我按下按钮F12然后关闭它，网站正好是我想要的，here is the result picture.