Slick Slider-如何注入包含剩余幻灯片数量的静态幻灯片？

Question

我有一个带有8张幻灯片的光滑滑块（一次显示4张）...我想在第一页上的幻灯片4处插入静态幻灯片。

我希望该幻灯片显示剩余的幻灯片数量，并在单击后加载它们。

这可能吗？

我拥有的代码：

HTML

<div class="slider">
    <div>
      <img data-lazy="https://dummyimage.com/200x200/000000/fff.jpg&text=Slide+1" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/006699/fff.jpg&text=Slide+2" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/ff0099/fff.jpg&text=Slide+3" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/994433/fff.jpg&text=Slide+4" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/ee8822/fff.jpg&text=Slide+5" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/ccaa44/fff.jpg&text=Slide+6" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/0055dd/fff.jpg&text=Slide+7" />
    </div>
    <div>
      <img data-lazy="https://dummyimage.com/200x200/99ddaa/fff.jpg&text=Slide+8" />
    </div>
  </div>

JS

$('.slider').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 4,
    slidesToScroll: 4,
    dots: false,
    arrows: true,
    infinite: false,
    cssEase: 'linear'
});

CSS

.slider {
    width: 800px;
    margin: 0 auto;
}

img {
    width: 200px;
    height: 200px;
}

.slick-prev:before, .slick-next:before { 
    color:grey !important;
}

在这里拨弄：https://jsfiddle.net/7cgxe8m0/