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
Cloning extra slides for Slick Slider
提问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:
这是滑块的开始,它根据需要出现:
The problem is that when you reach the last slide there is a bunch of whitespace before the new slides pop in:
问题是当你到达最后一张幻灯片时,在新幻灯片弹出之前会有一堆空白:
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
}
}]
});