Cloning Additional Slides for Slick Slider
I am using jQuery Slick Slider to create a left aligned, infinite, variable width slider. Here is a JSFiddle: http://jsfiddle.net/mtaube/rLkj3wcn/2/
Basic initialization and settings using the default theme:
$('.js-slick').slick({
dots: true,
variableWidth: true,
arrows: true,
});
Here is the start of the slider that appears at will:
The problem is that when you reach the last slide, a bunch of spaces appear before the new slides appear:
Is there a way to avoid this? I need to remove a temporary space. Thanks in advance.
source to share
Answering my question ... apparently this is a known bug with jQuery Slick Slider .
There are some bug reports on GitHub, here is the most appropriate one for those trying to subscribe to the issue: https://github.com/kenwheeler/slick/issues/1207
Apparently some hacks are posted on the GitHub report, but it didn't work for me as it broke the "dots" setting. I'll update this answer in case the error is eventually resolved. Thanks anyway.
source to share
This happens to me when I have 2 items in a row. If you know the number of items that can be displayed without scrolling, you can set a variable - in my case, I could get 6 items on the screen without having to scroll
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
}
}]
});
source to share