光滑滑块中的项目无法正确呈现

如何解决光滑滑块中的项目无法正确呈现

我在使用Slick Slider（js）时遇到了问题，该问题是在原始幻灯片之后立即加载幻灯片的克隆，因此幻灯片及其克隆会依次显示（请参见img）。

这是我初始化$（document）.ready（）上的滑块的方式：

$('.carousel').slick({
        dots: false,infinite: true,speed: 600,slidesToShow: 2,autoplay: true,prevArrow: '<div class="slick-prev"><i class="mdi mdi-chevron-left"></i></div>',nextArrow: '<div class="slick-next"><i class="mdi mdi-chevron-right"></i></div>'
    })

幻灯片的HTML代码是通过PHP调用的。

编辑：

@EdLucas，这是HTML代码：

$html = '<div class="carousel" id="'.$client.'">';    
$html .= '<div class="prod" id="'.$id.'">
                                    <a href="'.$offerUrl.'" class="'.$id.'" data-lbc="'.$data.'" onclick="filterClick(event)">
                                        <figure class="prod-image">
                                            <img src="'.$imgurl['newurl'].'" width="'.$imgurl['dim'].'" height="'.$imgurl['dim'].'" loading="lazy" />';
                                            if($fprice != null && $fprice > $price):
                                                $html .= '<span class="discount">'.-floor(100 - $price/$fprice * 100) .'&percnt;</span>';
                                            endif;
                                $html .=                  
                            $html .= '</figure>
                                        <div class="prod-Meta">
                                            <span>'.$name.'</span>
                                            <span class="price">'.$offer->price.$currency.'</span>
                                            <h4>'.$title.'</h4>
                                        </div>
                                    </a>
                                </div>
</div>';