克隆Slick Slider的额外幻灯片

Question

我正在使用jQuery Slick Slider创建一个左对齐的无限可变宽度滑块。这是JSFiddle：http://jsfiddle.net/mtaube/rLkj3wcn/2/

基本初始化和设置，使用默认主题：

$('.js-slick').slick({
    dots: true,
    variableWidth: true,
    arrows: true,
});

以下是滑块的开始，显示为所需：

问题是当你到达最后一张幻灯片时，在弹出新幻灯片之前会有一堆空格：

有没有办法避免这种情况？我需要删除闪烁的临时空白区域。提前谢谢。

Answer 1

添加infinite: false

它将解决空白问题以及滑块克隆问题。

Answer 2

您已使用以下选项：

infinite: false,
slidesToShow: 3

Answer 3

当我每行有2个项目时，这会发生在我身上。如果您知道无需滚动即可显示的项目数，则可以设置一个变量-在我的情况下，无需滚动即可在屏幕上显示6个项目

var infiniteScroll = true
if (noOfItems < 7)
{
infiniteScroll = false
}

$('.variable-width2').slick({
dots:true,
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2,
initialSlide: 1,
rows: 2,
responsive: [
{
          breakpoint: 1023,
          settings: {
            infinite: infiniteScroll,
            draggable: true,
            pauseOnHover: true,
            swipeToSlide: true,
            adaptiveHeight: false,
            centerMode: false,
            variableWidth: true,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 600,
           // settings: "unslick"
          settings: {
            infinite: infiniteScroll,
            draggable: true,
            pauseOnHover: true,
            swipeToSlide: true,
            adaptiveHeight: false,
            centerMode: false,
            variableWidth: true,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 2
          }
        }]
    });

Answer 4

回答我自己的问题......显然这是jQuery Slick Slider已知的错误。

GitHub上有一些错误报告，对于任何试图订阅此问题的人来说，这是最相关的报告：https://github.com/kenwheeler/slick/issues/1207

在GitHub报告中显然有一些黑客攻击，但它对我来说效果不佳，因为它打破了'点'设置。如果最终解决了bug，我会更新这个答案。不管怎样，谢谢。