为 Slick Slider 克隆额外的幻灯片

Question

我正在使用 jQuery Slick Slider to create a left-aligned, infinite, variable-width slider. Here is the JSFiddle: http://jsfiddle.net/mtaube/rLkj3wcn/2/

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

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

这是滑块的开头，按需要出现：

问题是，当您到达最后一张幻灯片时，在新幻灯片弹出之前有一堆白色space：

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

Answer 1

回答我自己的问题...显然这是 jQuery Slick Slider.

的一个已知错误

GitHub 上有一些错误报告，以下是对尝试订阅该问题的任何人最相关的错误报告：https://github.com/kenwheeler/slick/issues/1207

该 GitHub 报告中显然发布了一些黑客攻击，但它对我来说效果不佳，因为它破坏了 'dots' 设置。如果错误最终得到解决，我将更新此答案。还是谢谢了。

Answer 2

添加infinite: false

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

Answer 3

您已经使用了这些选项：

infinite: false,
slidesToShow: 3

Answer 4

当我每行有 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
          }
        }]
    });

为 Slick Slider 克隆额外的幻灯片

Cloning extra slides for Slick Slider

javascript

jquery

slick.js