带有KO和滑动条的HTML结构

Question

我有一个使用Slick制作图片轮播的html结构

代码HTML：

<div class="slick-carousel" >
       <div>
           <img src="http://placekitten.com/g/320/240">
       </div>
       <div>
           <img src="http://placekitten.com/g/320/240">
      </div>
      <div>
           <img src="http://placekitten.com/g/320/240">
      </div>
      <div>
           <img src="http://placekitten.com/g/320/240">
      </div>
</div>

CODE JS：

$('.slick-carousel').slick({
        infinite: true,
        slidesToShow: 3, 
        slidesToScroll: 1,
        arrows: true, 
        dots: false, 
        autoplay: true,
        autoplaySpeed: 2000,
        pauseOnHover: true
    });

到目前为止，一切顺利。

我的问题是我必须使用KO做这个结构，并保持相同....我不能做的事。

我尝试使用此结构，但是它不起作用。

<!-- ko if: compareProducts().count -->
<div class="slick-carousel" data-bind="foreach: compareProducts().items">
    <div>
        <img data-bind="attr: {'src' : image_src}" alt="">
    </div>
</div>
<!-- /ko -->

实际上，图像是一个接一个地渲染的，由于结构不好，因此无法使用光滑效果。

在下面的图片中，您可以在应用KO并滑动后看到HTML代码格式

您能帮我解决这个问题吗？

基本上，我想使用KO

在光滑的结构上应用浮雕

谢谢！