javascript 为 Slick Slider 克隆额外的幻灯片

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30601812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:25:32  来源:igfitidea点击:

Cloning extra slides for Slick Slider

javascriptjqueryslick.js

提问by ebuat3989

I am using jQuery Slick Sliderto create a left-aligned, infinite, variable-width slider. Here is the JSFiddle: http://jsfiddle.net/mtaube/rLkj3wcn/2/

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

The basic initialization and settings, using the default theme:

基本的初始化和设置,使用默认主题:

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

Here is the begginning of the slider, which appears as desired:

这是滑块的开始,它根据需要出现:

enter image description here

在此处输入图片说明

The problem is that when you reach the last slide there is a bunch of whitespace before the new slides pop in:

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

enter image description here

在此处输入图片说明

Is there a way to avoid this? I need to remove the temporary white space flashing. Thanks in advance.

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

采纳答案by ebuat3989

Answering my own question... apparently this is a known bug with the jQuery Slick Slider.

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

There are some bug reports on GitHub, here is the most relevant one for anyone trying to subscribe to the issue: https://github.com/kenwheeler/slick/issues/1207

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

There are apparently some hacks posted in that GitHub report, but it didn't work well for me as it broke the 'dots' setting. I will update this answer if the bug is eventually solved. Thanks anyway.

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

回答by Vivekraj K R

Add infinite: false

添加 infinite: false

It will solve the white space issue as well as slider cloning issue.

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

回答by kos_pmz

You have use these options:

您已使用这些选项:

infinite: false,
slidesToShow: 3

回答by Bodkins

This happens to me when i have 2 items per row. If you know the number of items that can be shown without scroll then you can set up a variable - in my case i could get 6 items on the screen without the need for a scroll

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