Slick: Variable Width + Infinite

[picard102]

When using variable width there is an amount of white space generated at either end.

When scrolling right as you approach the last slide more and more whitespace opens up until you hit the very last slide, at which point the white space is replaced by previous slides in infinite mode.

Similarly, if you move left through the slider, content disappears and is replaced by white space.

I would think that the expected results would be the white space be occupied by slides as the end comes into view, rather than as the last slide hits the left edge.

http://jsfiddle.net/memvovkz/

[jDavidnet]

+1 to this issue

[marlosirapuan]

+1

[onstuimig]

+1

[midudev]

+1

[nexflo]

+1
Very true...feelsbuggy. This should really be an option/setting.

[mafrost]

+1

[evalunamain]

Don't ask me why, but if it's not interfering with your slider in other ways, consider setting _slidesToShow_ to at least half of your number of slides, which would be 6 for your fiddle. It's a hack, but it solved my problem for now.

http://jsfiddle.net/memvovkz/1/

[picard102]

@evalunamain Interesting. Will have to try and see if this will work with dynamic content as well, where the number of objects is unknown.

[jcitysinner]

@picard102 it appears if you use @evalunamain 's method and just use jQuery to get the number of slides before the slider initializes, you should be able to pass in that number divided by 2. Haven't fully tested by it worked when I changed the JS in the fiddle you shared in the initial post.

[makseo]

Maybe someone can help?
What if I need to style an active slide?
And if slider has more than 1 in slidesToShow, for example, 6 slides.
All of them have an slick-active class, and I am using a centerMode: true, so only one slider in the middle has to be active.

[jcitysinner]

I think I've dealt with that before @makseo , if you use the beforeChange event, you can figure out which slide is the next slide and then apply a style directly to it.

[PixelZombie]

+1

[albertopriore]

+1

[gambala]

+1

[prod1992]

Hey guys.... had the same problem with a carousel of variable width of items....got a solution for this....

Have tried the solution of evalunamain, and set the slidesToShow option to half of my items, but this way slide controls (arrows) didn't work as expected...

So I go to the code of slick core....and found the lines where infinite is being initialized...here is the code down here:

Slick.prototype.setupInfinite = function() {

    var _ = this,
        i, slideIndex, infiniteCount;

    if (_.options.fade === true) {
        _.options.centerMode = false;
    }

    if (_.options.infinite === true && _.options.fade === false) {

        slideIndex = null;

        if (_.slideCount > _.options.slidesToShow) {

            if (_.options.centerMode === true) {
                infiniteCount = _.options.slidesToShow + 1;
            } else {
                infiniteCount = _.options.slidesToShow;
            }

            for (i = _.slideCount; i > (_.slideCount -
                    infiniteCount); i -= 1) {
                slideIndex = i - 1;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex - _.slideCount)
                    .prependTo(_.$slideTrack).addClass('slick-cloned');

// added this code here
$(_.$slides[slideIndex + 1]).clone(true).attr('id', '')
.attr('data-slick-index', slideIndex - _.slideCount)
.prependTo(_.$slideTrack).addClass('slick-cloned');
$(_.$slides[slideIndex + 2]).clone(true).attr('id', '')
.attr('data-slick-index', slideIndex - _.slideCount)
.prependTo(_.$slideTrack).addClass('slick-cloned');
//
}
for (i = 0; i < infiniteCount; i += 1) {
slideIndex = i;
$(_.$slides[slideIndex]).clone(true).attr('id', '')
.attr('data-slick-index', slideIndex + _.slideCount)
.appendTo(_.$slideTrack).addClass('slick-cloned');
// and this code here
$(_.$slides[slideIndex + 1]).clone(true).attr('id', '')
.attr('data-slick-index', slideIndex + _.slideCount)
.appendTo(_.$slideTrack).addClass('slick-cloned');
$(_.$slides[slideIndex + 2]).clone(true).attr('id', '')
.attr('data-slick-index', slideIndex + _.slideCount)
.appendTo(_.$slideTrack).addClass('slick-cloned');
//
}
_.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
$(this).attr('id', '');
});

        }

    }

};

so it creates some more clones...... and I suggest to make an option, which can manipulate the number of clones on this position....

Hope this helps....thanks guys.

[gius80]

+1

[rafa-as]

+1

[rafa-as]

Hi @prod1992 , I tested your solution and didn't work for my case.

Finding the solution I found one trick: use unFilter function when the init event is fired.

Edit: In my case didn't use variableWidth and also fails

[prod1992]

Thanks, can you provide a snippet for better understanding?

On Monday, 21 December 2015, Rafa Aguilar [email protected] wrote:

Hi prod1992, I tested your solution and didn't work for me case.

Finding the solution I found one trick: use unFilter function when the
init event is fired.

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-166279797.

*Best wishes and have a nice day! *

_Levon Grigoryan._

[rafa-as]

I use with angular directive https://github.com/devmark/angular-slick-carousel, if you want to check my issue test the demo of this repo.

For solve, only have to click unFilter button.

[chemoish]

+1

[rafa-as]

You can see the error in the next screencast: https://www.dropbox.com/s/rte1569yb7z167t/angular-slick.mov?dl=0

[danielfriis]

+1

[HonzaMikula]

+1

[kenwheeler]

I'm off next week so I'll try to get this sorted out folks

[prod1992]

that would be great 👌

On Fri, Dec 25, 2015 at 8:26 AM, Ken Wheeler [email protected]
wrote:

I'm off next week so I'll try to get this sorted out folks

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-167191108.

*Best wishes and have a nice day! *

_Levon Grigoryan._

[danielmuehlbacher]

+1, same problem here.

[kenwheeler]

Are we all in agreement that the last slide should stick to the right edge?

[prod1992]

Yes, I agree with that.

On Saturday, 9 January 2016, Ken Wheeler [email protected] wrote:

Are we all in agreement that the last slide should stick to the right edge?

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-170242120.

*Best wishes and have a nice day! *

_Levon Grigoryan._

[kenwheeler]

@prod1992 so if its variable width, the last navigable/selectable index should be the one that sticks the last one to the right edge?

[prod1992]

When width is variable + infinite option is enabled. When there are about
3-4 slides, near the edges slider blinks when you change slides.

On Saturday, 9 January 2016, Ken Wheeler [email protected] wrote:

@prod1992 https://github.com/prod1992 so if its variable width, the
last navigable/selectable index should be the one that sticks the last one
to the right edge?

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-170252730.

*Best wishes and have a nice day! *

_Levon Grigoryan._

[kenwheeler]

Well aware, but I'm trying to figure out how to fix this issue, but not create issues for other modes/settings

[prod1992]

Ken, I think its more about infinite option, but variable width.

On Saturday, 9 January 2016, Levon Grigoryan levon1.[email protected]
wrote:

When width is variable + infinite option is enabled. When there are about
3-4 slides, near the edges slider blinks when you change slides.

On Saturday, 9 January 2016, Ken Wheeler <[email protected]

@prod1992 https://github.com/prod1992 so if its variable width, the
last navigable/selectable index should be the one that sticks the last one
to the right edge?

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-170252730.

*Best wishes and have a nice day! *

_Levon Grigoryan._

*Best wishes and have a nice day! *

_Levon Grigoryan._

[dieterdeduytschaever]

+1

[petruseugene]

+1

[ghost]

+1

[localpcguy]

We actually just removed Slick in a project for a different carousel partially because of this issue. It would go a long way towards us considering it again for future projects. Are you taking PRs for this issue, or is someone already working on it?

[prod1992]

+1

On Wed, Feb 3, 2016 at 8:10 PM, Mike Behnke [email protected]
wrote:

We actually just removed Slick in a project for a different carousel
partially because of this issue. It would go a long way towards us
considering it again for future projects. Are you taking PRs for this
issue, or is someone already working on it?

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-179316942.

*Best wishes and have a nice day! *

_Levon Grigoryan._

[kenwheeler]

@localpcguy if you have any ideas, i'm all ears.

[rorykoehler]

@kenwheeler an option of how many slides to clone ahead while on infinite might work well?

[prod1992]

I think yes. try to make twice more clones...

On Thu, Feb 4, 2016 at 4:39 PM, Rory Koehler [email protected]
wrote:

@kenwheeler https://github.com/kenwheeler an option of how many slides
to clone ahead while on infinite might work well?

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-179809789.

*Best wishes and have a nice day! *

_Levon Grigoryan._

[prod1992]

this is dirty, but have no any idea.

On Thu, Feb 4, 2016 at 4:40 PM, Levon Grigoryan levon1.[email protected]
wrote:

I think yes. try to make twice more clones...

On Thu, Feb 4, 2016 at 4:39 PM, Rory Koehler [email protected]
wrote:

@kenwheeler https://github.com/kenwheeler an option of how many slides
to clone ahead while on infinite might work well?

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-179809789.

*Best wishes and have a nice day! *

_Levon Grigoryan._

*Best wishes and have a nice day! *

_Levon Grigoryan._

[ghost]

Is there at least a solution for using infinite: false?

[Carlospineiro]

Hi!

Although i know it's not a good practice, i've made a little change in the core that it's working for me.
In slick.js, line 1131, i've added after "targetLeft = targetSlide[0] ? targetSlide[0].offsetLeft * -1 : 0;" the next piece of code:

if(_.$slideTrack.children('.slick-slide').eq(_.slideCount - 1).hasClass("slick-active")){
targetSlide = _.$slideTrack.children('.slick-slide').eq(_.slideCount - 1);
targetLeft = $(targetSlide[0]).closest(".slick-slider").width() - (targetSlide[0].offsetLeft + targetSlide[0].offsetWidth);
}

My options: centerMode: false, infinite: false

I'm sure there has to be a better way to solve that, meanwhile it could help someone

[v3nt]

+1

[ghost]

@Carlospineiro if you have more than one item visible but slidesToShow set to 1 this will first slide the last item to the left then snap it to the right.

[ramdgupta]

FOR WHITE SPACE IN CASE YOU DEFINE A SLIDE TO SLIDE WITH CASE OF INFINITE FALSE DO NEED DO SOMETHING LIKE THA IN SLICK.JS CODE ADD THIS LINE IN PLACE
positionOffset=0; IT'S BEST SOLUTION FOR THE SLDIE

if (_.options.infinite === false) {
if ((_.currentSlide === 0 && swipeDirection === 'right') || (_.currentSlide >= _.getDotCount() && swipeDirection === 'left')) {
swipeLength = _.touchObject.swipeLength * _.options.edgeFriction;
_.touchObject.edgeHit = true;
positionOffset=0;
}
}

[jBernz]

Just started with slick for a project this week. I need to display cutoff slides so I'm using variableWidth: true and infinite: false. However the slider not sticking on the right (and displaying whitespace) is a major problem and I'll have to scrap slick if I can't figure it out.

[jackhummah]

+1

[BenevidesLecontes]

+1

[markmaurerrr]

+1

[keep4r]

My solutions.

1. Add clones options to _.defaults = {.
   clones: 5 for example.
2. Find stroke with _.slideCount > _.options.slidesToShow) and replace by

`if (_.slideCount > _.options.slidesToShow) {

            if (_.options.centerMode === true) {
                infiniteCount = _.options.slidesToShow + 1;
            } else {
                infiniteCount = _.options.slidesToShow;
            }

            for (i = _.slideCount; i > (_.slideCount -
                    infiniteCount - _.options.clones); i -= 1) {
                slideIndex = i - 1;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex - _.slideCount)
                    .prependTo(_.$slideTrack).addClass('slick-cloned');
            }
            for (i = 0; i < (infiniteCount + _.options.clones); i += 1) {
                slideIndex = i;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex + _.slideCount)
                    .appendTo(_.$slideTrack).addClass('slick-cloned');
            }
            _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
                $(this).attr('id', '');
            });

        }`

[smythp]

+1

[whythecode]

+1 it would also be great if, when showing the next slide (either left or right), the slide's actual width is used - so that, if it's bigger than the rest of the slides, it'll be shown in full. I haven't looked, but I'm guessing the standard movement delta is based on the first slide ?

[arkid]

+1 This issue is over a year old.... surely something can be done for this as its stopped me using it on a project as well once I discovered this.

[prod1992]

+1 after this issue I am always using owl carousel...(

On Saturday, 30 April 2016, arkid [email protected] wrote:

+1 This issue is over a year old.... surely something can be done for this
as its stopped me using it on a project as well once I discovered this.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-215960719

*Best wishes and have a nice day! *

_Levon Grigoryan._

[redpop]

+1

[kaalis]

This is driving me nuts.
I have 13 slides. Tested infinite:true, variableWidth: true, slidesToScroll: 3.
So if I delete 1 slide and that makes last transition smooth and there's no jumping between last and first slide (in next round).

Now I can either delete 13th slide or add 2 to make it work with slidesToScroll: 3.
Or add 1 to make it work with slidesToScroll: 2.

[khantroversy]

+1

[danimalweb]

+1

[apmeyer]

+1

[rrubbico]

+1

[dreiacht]

+1

[onlyyouwa]

+1

[chinhphan099]

any update ?

[morjanmihail]

+1. Nope @chinhphan099. The problem persist for more than 1 year...

[bbobek]

+1, especially for infinite set to false

[0Neji]

I'm also having to switch to another slider plugin because of this issue. I love Slick but for my current project, this kills it.

[ChanYiSen]

is there any useful way fixed this problem?

[leonardo-rojas]

@evalunamain solution worked for me, I don't know why this happens, but if you set the slides to show half of the current slides, then it wont make that jump:

$('.slickSlider').slick({
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: true,
speed: 300,
slidesToShow: 2,
centerMode: true,
variableWidth: true
});

[mixrich]

Looks like it depends on how many slides you want to show on the screen. For example, if you set "slidesToShow: 1", white space will occur until 1 slide lefts on the screen and just after this slider will show other slides from the begining. If you set "slidesToShow: 6" white space will dissapear when 6 slides left.

[sranka23]

The issue that I was facing was not on small viewport but on full screen viewports over 1440px where blank slides came at the end before infinite loop could begin. The number of blank slides at the end were equal to the number of slides that had to be shown per view.

I have been able to get this working across all viewports and multiple tiles with the following configuration:

                    centerMode: true,
                    infinite: true,
                    centerPadding: '150px',
                    adaptiveHeight: false,
                    slidesToShow: 2,
                    variableWidth: true,
                    autoplay: true,
                    autoplaySpeed: 2000

I used parts of previously added solutions from @keep4r and @Carlospineiro . I added the following stuff:

1. clones: 5 in default options.
   2 Updating Infinite generating Loops:
   for (i = _.slideCount; i > (_.slideCount - infiniteCount - _.options.clones); i -= 1)
for (i = 0; i < infiniteCount + _.options.clones; i += 1)
2. Add this to ensure that you always have a next/prev slide to show

if(_.$slideTrack.children('.slick-slide').eq(_.slideCount - 1).hasClass("slick-active")){
      targetSlide = _.$slideTrack.children('.slick-slide').eq(_.slideCount - 1);
      targetLeft = $(targetSlide[0]).closest(".slick-slider").width() - (targetSlide[0].offsetLeft + targetSlide[0].offsetWidth);
}

Hope that helps. Thanks

[samuelcotterall]

+1

[headfire94]

+1 to this issue

[karavaev-evgeniy]

+1
critical bug exist 1.5 years

[PiotrKalachyn]

What solved it for me was setting slidesToShow N-1, where N is the total number of slides. The number has to be at least the amount of slides that can be visible in the slider at the same time. Setting it to an x >= N prevented autoplay.

[m-sarkar]

$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
rtl: true,
autoplay: true,
slidesToShow: 6,
variableWidth: true
});

then slider will show blank, Have any solution?

[rmartins90]

+1

Tried setting slidesToShow to half of total and total-1, none of the two solutions worked for me.
The weird part is that this only happens after viewport breakpoint.

infinite: true,
dots: false,
speed: 4000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
touchMove: false,
swipe: false,
slidesToShow: 3,
rows: 2,
slidesPerRow: 1,
mobileFirst: true,
variableWidth: true,
responsive: [
  { breakpoint: 767, settings: {
              rows: 1,
              slidesToShow: 14,
            }
   }
]

[m-sarkar]

hello guys,
I got solution,

set slider div dir="rtl"

and
$('#slick-slider').slick({
dots: false,
infinite: true,
speed: 800,
autoplaySpeed: 10000,
rtl: true,
slidesToShow: 5,
draggable: false,
autoplay: true,
slidesToScroll: 1
});

[rmartins90]

@m-sarkar That simply hides all my slide items.

[m-sarkar]

@rmartins90 check this markup
http://prntscr.com/csujzv

[rmartins90]

Got it. But didn't solve the original issue as well.

[xXanth0s]

+1

[Auronmatrix]

+1

[mmtrombley]

+1

[hoffmander]

+1

[chimilord]

+1

[keesvanlierop]

+1

[professorkolik]

@keesvanlierop Hi, any updates?

[ActionScripted]

Following the suggestion from @PiotrKalachyn above fixed things for me! Here's a simplified version of what I ended up using:

// Setup Slick w/count to side-step empty space (issue #1207)
$('.slider).each(function() {
  var count = $(this).find('.slider__item').length;

  $(this).slick({
    infinite: true,
    slidesToShow: count - 1,
    variableWidth: true
  });
});

[xXanth0s]

For those, who have problems with the infinite slider.
search for

for (i = 0; i < infiniteCount; i += 1) { slideIndex = i; $(_.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + _.slideCount) .appendTo(_.$slideTrack).addClass('slick-cloned'); } _.$slideTrack.find('.slick-cloned').find('[id]').each(function () { $(this).attr('id', ''); });

and change it to

for (i = 0; i < infiniteCount + _.slideCount; i += 1) { slideIndex = i; $(_.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + _.slideCount) .appendTo(_.$slideTrack).addClass('slick-cloned'); } _.$slideTrack.find('.slick-cloned').find('[id]').each(function () { $(this).attr('id', ''); });

[kriscoleman]

@xXanth0s
Just tried your suggestion, it did not solve the problem for me.

[abourge]

I am having this same issue. I've noticed that this only happens when the slider is first initialized. When it reloads at a breakpoint, the infinite slider works as expected even when resizing to the original breakpoint. Only when I refresh the page does it sorta break again and shows cloned slides at the end of the loop that have a height of 1px, but the slides have no content anyway

[cacampbell]

+1

[timbowen]

Same issue for me. I tried the for (i = 0; i < infiniteCount + _.slideCount; i += 1) fix above but that didn't seem to fix anything.

[PatrikJarl]

+1

[AlejandroRV]

+1

[AlejandroRV]

this style works for me
.slick-track { overflow-x: scroll; }

[jjmorga]

+1

I have an infinite auto scrolling carousel, when looping back to the first slide, the image was always blank until the slide finished animating, this JS solved this issue for me:

    $carousel.slick({
      infinite: true,
      autoplay: autoplay,
      speed: 1000,
      slidesToShow: 1
    });

    $carousel.on('beforeChange', function(e, slick, currentSlide, nextSlide){
        var $this = $(e.currentTarget);
        var $nextBanner = $this.find('[data-slick-index="'+nextSlide+'"] .component-carousel-slide');
        $(".slick-cloned").find(".component-carousel-slide").css("background", $nextBanner.css("background"))
    });

[MADPT]

+1

Until this bug is fixed, I've to use Owl...

[bboy-splendid]

Spent a long time looking for something that would achieve this, finally found this slider which did exactly what I needed:

http://richardscarrott.github.io/jquery-ui-carousel/

[melneff]

I found that setting infinite to false and draggable to false solves this issue.

[sergeisomething]

Setting up "arrows: false" helped to me.

[munaly]

+1

[carloschneider]

+1 please! :pray:

[illusiv]

+1

[thinckx]

@PiotrKalachyn's hack works perfect for me. Thanks!

[michaelwilhelmsen]

+1

[skoldborg]

+1

[janzikmund]

@xXanth0s Thanks, fixed the problem for me. To explain for the others: the problem was that when in infinite mode, first slide is cloned to the end of the carousel to allow fluent transition, but until this cloned slide reaches left margin of the screen to "connect" to the start again, white space is shown on the right. xXanth0s's solution clones multiple slides to the end, so the empty space is covered until the first cloned slide gets to the left edge and slider can connect to the beginning for new loop.

[FlowinBeatz]

@xXanth0s solution works like a charm! Many thanks!!!

[rholmes-emagine]

@PiotrKalachyn 's solution fixed the issue for me as well.

[skaught]

xXanth0s commented on Nov 30, 2016
https://github.com/kenwheeler/slick/issues/1207#issuecomment-263908723

patching using xXanthOs work works.
+1

[jmharveys]

Any news about this issue?!?

[tourtools]

@jmharveys like skaught states in the above comment, I can confirm #1207 (comment) xXanth0s' patch works.

[jmharveys]

@tourtools The bug is still happening for me when i'm using ' variableWidth' inside a breakpoint!

[gerhard-boden]

We would love to use slick-carousel (wrapped within a react component) for the new backend we are currently creating for our CMS (www.neos.io). Any chance this bug might be fixed soonish?

[azat-io]

+1

[MattStopa]

So this was the most aggravating bug but I finally figured it out. I scoured the other solutions but it just didn't pan out for me. This works though and as far as I can tell works 100% of the time, even if you resize. I'm going to fork the project and clean up a lot of the code but for now....

Go to the Slick.prototype.slideHandler and find this code at the bottom

if (dontAnimate !== true) {
  _.animateSlide(targetLeft, function() {
  _.postSlide(animSlide);

Then add this BEFORE it.

var slickWidth = $('.slick-list').width()
var allSlides = _.$slideTrack.children('.slick-slide')
var cumulativeSize = 0;

for(var i = _.currentSlide; i < _.slideCount; i++) {
  cumulativeSize += $(allSlides[i]).width()
}

if(cumulativeSize < slickWidth) {
  for(var i = _.currentSlide; i > 0; i--) {
    cumulativeSize += $(allSlides[i]).width()
    if(cumulativeSize >= slickWidth) {
      targetLeft = _.getLeft(i)
      animSlide = _.getLeft(i)
      _.currentSlide = i
      break;
    }
  }
}

Basically we are saying "Go through all remaining slides and find out their width and add that together. If it's not big enough then walk backwards through the slides and add another slide until we have enough to fit. Hope this saves someone some time.

[gerhard-boden]

@MattStopa This is great news! Feel free to ping me as soon as the pull request is ready for testing. Thanks a lot for looking into this important issue!

[MattStopa]

@gerhard-boden I'm probably not going to open a PR since there are 116 PR's that haven't been merged on this project yet. I may fork my own version though. Feel free to use this code and add it in if you want to.

If I do open a PR I'll let you know.

[gerhard-boden]

There are still PRs being merged and this one is definitely an important fix I'd say. Would be great to have it in an official release as well 😃

[MattStopa]

@gerhard-boden Alright let me fork it

[gerhard-boden]

@MattStopa Awesome, thanks a lot! Will test and review on the upcoming weekend!

Hope everyone who responded here lately will take notice of the PR and "upvote" it by approving.

[skillmatic-co]

@xXanth0s patch worked for me, @MattStopa's didn't.

[MattStopa]

Must be for a different sett8ng

On Jul 26, 2017 6:01 PM, "Corey Tenold" [e-mail] wrote:

@xXanth0s https://github.com/xxanth0s patch worked for me, @MattStopa
https://github.com/mattstopa's didn't.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-318195979,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AALqUVteBpS4jn2kcRSWDwi8EfcfHXRIks5sR7c_gaJpZM4D6_WK
.

[ChrisAllinson]

The following worked for me:

• specifically setting the width of each slide
• not setting the "slidesToShow" prop
• infinite = true

[rogeriotr1]

Its not a beauty solution but i resolved cloning the code on version 1.7.1

            for (i = 0; i < infiniteCount  + _.slideCount; i += 1) {
                slideIndex = i;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex + _.slideCount)
                    .appendTo(_.$slideTrack).addClass('slick-cloned');
            }

            _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
                $(this).attr('id', '');
            });

            for (i = 0; i < infiniteCount  + _.slideCount; i += 1) {
                slideIndex = i;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex + _.slideCount)
                    .appendTo(_.$slideTrack).addClass('slick-cloned');
            }

            _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
                $(this).attr('id', '');
            });

slick.min.txt

slick.min.zip

[joebirkin]

@MattStopa's fix worked for me! Glad I don't have to bin off this slider - the "center" option is super handy.

[foysalremon]

This quick fix help me for my project. This solved my blank space problem perfectly. Willing to share with all of you - https://codepen.io/foysalremon/pen/KoWjLg

[faragos]

Any general solution to this problem in sight?

[rbenvenuto]

I'm using version 1.9.0.

Tried all the proposed fixes here, but none worked.
Any update on this issue?
It's really been a headache

[manideep-karnati]

Guys

For the white space issue I have found a solution.
I have faced the white space issue in higher resolutions(>1920px).

In the current version @1.9.0

My slick options were below

 $('.your-class').slick({
            dots: true,
            variableWidth: true,
            centerMode: true,
            infinite: true,
            responsive: [
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true,
                        variableWidth: true
                    }
                }
            ]
        });

Step1:
line number 1177
replace the below
targetSlide = _.$slideTrack.children('.slick-slide').eq(slideIndex + _.options.slidesToShow + 1);
with
targetSlide = _.$slideTrack.find('[data-slick-index="'+slideIndex+'"]');

The above one centers the our actual first slide. Previously slick was taking the targetslide as first clone which is having data-slick-index = -2.

Step 2:
The next step is in the slick setupInfinite method

change the first for loop
for (i = _.slideCount; i > (_.slideCount - infiniteCount); i -= 1)
to the below
for (i = _.slideCount; i > 0; i -= 1)

The above for loop adds more clones to the left. Previously it was adding only 2 clones to the left

Except this issue the carousel is perfeclty working fine.
@kenwheeler Thanks for the nice work that you have done on this.

[ShakurOo]

What's up about fix ? I don't be a fan about touching the standard behavior of the lib, I won't add regresison and causing breaking just for one specific case.

[manideep-karnati]

@ShakurOo In my case it didn't break any other functionality.

[notmutiny]

3 years later and I'm also getting this problem

[notmutiny]

Actually I solved my issue and it was slightly different.

My infinite carousel would load my slides fine (~3 shown, moving one increment) but when it wrapped the first slide did not show its background. The text loaded fine but the BG was empty. Incrementing again the second slide had this issue and the last slide (now in position 1) was the only to show its BG. Incrementing again to make a full cycle would make slides 1, 2, and 3s background pop in and the carousel would load images fine until it reached the end where this behavior happens again. Going backwards from slide 1 would cause the same problem -- the last slide would have no BG, the second to last slide would have no BG, then BAM all 3 pop in.

My solution (after trying all of them here) was to change all of my IDs on my slides to classes. And it works! It was that easy. I realized this after removing my ID BGs and noticing that setting my slides .class with a generic BG would not reproduce the error and worked from there.

Hopefully this will help someone with this issue or leads to it being patched.

[danny-freeman]

I had the same problem, I have managed to resolve it for my issue.

I had a CSRF within the slide class e.g.
<input type="hidden" id="token" value="{{ csrf_token() }}"> as soon as I moved that hidden input out of the div with a class name of slide this got rid of the empty slide for me.

I hope this might help some of you.

[Slluxx]

+1
@kenwheeler over 3 years later this is still a problem

[Slluxx]

i had to make a list of the bugs that occur with the settings for my colleagues.

• "additionalFiles" is yes when images are added to the slider after initialisaton
• size big and size small is when the slider is in a responsive div and its either big or small (no dimensions written down)

this is what i came up with:

An example when inifinite, centerMode & variableWidth are true + images are added after init.
The 3 images you see (actually 4 loaded) are added AFTER the initialisation. they appear as the first images. once you drag or click on the arrow, it will jump 5 images because the images added after inititalisation do not change the index. The index that should be active is 1 but its pushed far to the right.

[HarwinBorger]

+1 please fix this

[shavonn]

+1

[Pionell]

+1

[NazarkinRoman]

Any updates here?

[BonBonSlick]

November 2018 still got bug.

[jaclyntan]

What is the recommended fix for this? I keep running into this problem where when it loops around to the first slide again it lags then displays the slide...
I'm using center mode and center padding but am not using variable width.

[BonBonSlick]

I disabled infinite scroll. It is too buggy

[bomzj]

As good workaround I suggest to calculate slidesToShow setting e.g.

var slidesToShow = Math.round(slickContainerWidth / slideWidth);

$('.slick').slick({
...
slidesToShow: slidesToShow
});

[kshimrob]

+1

[ashutoshvrm8]

+1

[AndrewSavetchuk]

Who's from 2019?

[oliashford]

Yup

[junaidfarooqui]

Hi guys, I solve this problem by editing into the library at un-minified version line number 2131 where code should say this:

} else if (_.options.variableWidth === true) {
    _.$slideTrack.width(5000 * _.slideCount); 
}

Replace this:

_.$slideTrack.width(5000 * _.slideCount);

by:

var calc = 0;
_.$slides.each(function(index, element) {
    var styles = window.getComputedStyle(element);
    var marginLeftRight = parseInt(styles.marginLeft, 10) + parseInt(styles.marginRight, 10);
    calc = calc + element.offsetWidth + marginLeftRight + 1; // +1 for decimal values caught by browser.
});

My slider settings follows like this:

$('.mySelector').slick({
    autoplay: false,
    infinite: false,
    slidesToShow: 8,
    variableWidth: true,
    arrows: true
});

Good Luck 👍

[Painklller]

Hi guys, I solve this problem by editing into the library at un-minified version line number 2131 where code should say this:

} else if (_.options.variableWidth === true) {
    _.$slideTrack.width(5000 * _.slideCount); 
}

Replace this:

_.$slideTrack.width(5000 * _.slideCount);

by:

var calc = 0;
_.$slides.each(function(index, element) {
    var styles = window.getComputedStyle(element);
    var marginLeftRight = parseInt(styles.marginLeft, 10) + parseInt(styles.marginRight, 10);
    calc = calc + element.offsetWidth + marginLeftRight + 1; // +1 for decimal values caught by browser.
});

My slider settings follows like this:

$('.mySelector').slick({
    autoplay: false,
    infinite: false,
    slidesToShow: 8,
    variableWidth: true,
    arrows: true
});

Good Luck

Work fine! 10x!

[pablo67340]

For those, who have problems with the infinite slider.
search for

for (i = 0; i < infiniteCount; i += 1) { slideIndex = i; $(_.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + _.slideCount) .appendTo(_.$slideTrack).addClass('slick-cloned'); } _.$slideTrack.find('.slick-cloned').find('[id]').each(function () { $(this).attr('id', ''); });

and change it to

for (i = 0; i < infiniteCount + _.slideCount; i += 1) { slideIndex = i; $(_.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + _.slideCount) .appendTo(_.$slideTrack).addClass('slick-cloned'); } _.$slideTrack.find('.slick-cloned').find('[id]').each(function () { $(this).attr('id', ''); });

This should honestly be PR'd into the current branch. Absolutely fixed my issue. Not to mention, I've had this issue on 3 seperate projects now. It seems like EVERY time I use slick, there's some sort of library ruining bug. "Last carousel you'll ever need" my ass. The bugs in this thing are brutal, and the fact that this fix hasn't been even looked at or included in current versions is beyond me.

Good job finding this man. Saves me hours of wasted time searching for the solution.

[markmaurerrr]

@pablo67340 The only thing that is brutal is you talking like this about someone who "wasted" hundreds of hours to build a free slider that makes thousands of people happy. Try to build this on your own. You'll either fail or "waste" the next years perfecting this thing to please EVERYONE in the world FOR FREE and still constantly get hate from people like you, because there is always a better way to do it.

[pablo67340]

@pablo67340 The only thing that is brutal is you talking like this about someone who "wasted" hundreds of hours to build a free slider that makes thousands of people happy. Try to build this on your own. You'll either fail or "waste" the next years perfecting this thing to please EVERYONE in the world FOR FREE and still constantly get hate from people like you, because there is always a better way to do it.

Free or not, this issue was opened 4 YEARS AGO. There are over 150 comments, and its still sitting doing nothing. Your telling me it takes 4 years to merge a fix somebody else already had to go find?! I understand its something free, and people have better things to be doing, making a living, etc. But when absolutely 0 shits are given about established issues like this, that's when I have a problem. Not to mention, the guy practically shits on people who gives ideas for enhancements and fixes.

https://cdn.discordapp.com/attachments/510627683449962510/559904888700534805/unknown.png

Hop off buddy

[kenwheeler]

You wanna take over maintenance of the lib bud?

On Thu, Mar 28, 2019 at 10:13 AM Bryce Wilkinson [e-mail]
wrote:

@pablo67340 https://github.com/pablo67340 The only thing that is brutal
is you talking like this about someone who "wasted" hundreds of hours to
build a free slider that makes thousands of people happy. Try to build this
on your own. You'll either fail or "waste" the next years perfecting this
thing to please EVERYONE in the world FOR FREE and still constantly get
hate from people like you, because there is always a better way to do it.

Free or not, this issue was opened LAST YEAR. There are over 150 comments,
and its still sitting doing nothing. I understand its something free, and
people have better things to be doing, making a living, etc. But when
absolutely 0 shits are given about established issues like this, that's
when I have a problem. Not to mention, the guy practically shits on people
who gives ideas for enhancements and fixes.

https://cdn.discordapp.com/attachments/510627683449962510/559904888700534805/unknown.png

Hop off buddy

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-477612324,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARfmOinX69pXHzv1Vik-lF32gTySZoCks5vbM34gaJpZM4D6_WK
.

[pablo67340]

You wanna take over maintenance of the lib bud?
…
On Thu, Mar 28, 2019 at 10:13 AM Bryce Wilkinson @.*> wrote: @pablo67340 https://github.com/pablo67340 The only thing that is brutal is you talking like this about someone who "wasted" hundreds of hours to build a free slider that makes thousands of people happy. Try to build this on your own. You'll either fail or "waste" the next years perfecting this thing to please EVERYONE in the world FOR FREE and still constantly get hate from people like you, because there is always a better way to do it. Free or not, this issue was opened LAST YEAR. There are over 150 comments, and its still sitting doing nothing. I understand its something free, and people have better things to be doing, making a living, etc. But when absolutely 0 shits are given about established issues like this, that's when I have a problem. Not to mention, the guy practically shits on people who gives ideas for enhancements and fixes. https://cdn.discordapp.com/attachments/510627683449962510/559904888700534805/unknown.png Hop off buddy — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1207 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AARfmOinX69pXHzv1Vik-lF32gTySZoCks5vbM34gaJpZM4D6_WK .

Wouldn't take 3 years to implement a fix someone else had to find. Can tell you that much.

[kenwheeler]

No I’m literally asking.

On Thu, Mar 28, 2019 at 10:15 AM Bryce Wilkinson [e-mail]
wrote:

You wanna take over maintenance of the lib bud?
… <#m_-4857339202042287895_>
On Thu, Mar 28, 2019 at 10:13 AM Bryce Wilkinson @.*> wrote:
@pablo67340 https://github.com/pablo67340 https://github.com/pablo67340
The only thing that is brutal is you talking like this about someone who
"wasted" hundreds of hours to build a free slider that makes thousands of
people happy. Try to build this on your own. You'll either fail or "waste"
the next years perfecting this thing to please EVERYONE in the world FOR
FREE and still constantly get hate from people like you, because there is
always a better way to do it. Free or not, this issue was opened LAST YEAR.
There are over 150 comments, and its still sitting doing nothing. I
understand its something free, and people have better things to be doing,
making a living, etc. But when absolutely 0 shits are given about
established issues like this, that's when I have a problem. Not to mention,
the guy practically shits on people who gives ideas for enhancements and
fixes.
https://cdn.discordapp.com/attachments/510627683449962510/559904888700534805/unknown.png
Hop off buddy — You are receiving this because you were mentioned. Reply to
this email directly, view it on GitHub <#1207 (comment)
https://github.com/kenwheeler/slick/issues/1207#issuecomment-477612324>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARfmOinX69pXHzv1Vik-lF32gTySZoCks5vbM34gaJpZM4D6_WK
.

Wouldn't take 3 years to implement a fix someone else had to find. Can
tell you that much.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-477613383,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARfmJgCUgv6Mr_VfD88_oC4L2Lb7bB2ks5vbM6XgaJpZM4D6_WK
.

[pablo67340]

If I were to make a PR, be honest and tell me how long it would take for you to press merge.

[kenwheeler]

I’ll eventually rewrite it in regular JS, when the need for legacy browser
support disappears, but right now i have two kids and I work in finance
tech and haven’t needed a carousel in 4 years. So if you’d like to maintain
it, I’d be happy that someone is. Otherwise, if you’re just gonna talk shit
about something you got for free, either:

a) fork it
b) write your own
c) shush

On Thu, Mar 28, 2019 at 10:17 AM Bryce Wilkinson [e-mail]
wrote:

If I were to make a PR, be honest and tell me how long it would take for
you to press merge.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-477613909,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARfmL1X-khHEn1-g051rbCvRNaxysKiks5vbM7qgaJpZM4D6_WK
.

[pablo67340]

You're absolutely correct. I apologize for shitting on your work. I've just been getting very annoyed at chasing slick bugs on almost every website I use it in. Not sure if its my custom styling or whats up, but its very consistent, and the same issues across all sites. Ill fork, commit and make a PR to actually contribute for the greater good rather than shitting on you and your hard work.

Again I apologize for how I approached things here.

[jDavidnet]

Hey, Ken, you've done a great job.
This project has enabled the impossible for many of us, I don't know any
other script that comes close to doing what yours does.

People usually don't like to fork someones work and start promoting the new
one unless the author is no longer maintaining it, or a new core group is
formed to maintain the work.

Several years ago I was using this project in a large financial project and
I had made a number of modifications to the script to suit that projects
purposes. At the time the code was written so that we could submit a PR
back to the original project. ( but it never happened for corporate
reasons )

This was actually one of the issues that we had resolved, and I made a
number of augmentations so that I could connect the list to a number of
datasource type objects. We got it working with Angular 1, knockout,
backbone and I think react. I wonder if I could find that old code and
rewrite it and contribute it back.

I know it came off as a bit gruff, and I have a 2 year old now so I know
now much work little ones are, but are you serious about supporting a fork
or supporting a new core community to maintain the script? I wouldn't want
to be the only one supporting it, but I would be interested in helping.

I think one of the core challenges in opening up the maintenance of the
script would be to put some minimal best practices like testing, linting,
etc. You mention pure JS, did you mean ES5, ES6, or later?

If you don't want to do this alone, I think many hands may make the load
lighter. Is that of interest to you?

Otherwise, I'm patient and thankful for your work.

On Thu, Mar 28, 2019 at 9:08 AM Bryce Wilkinson [e-mail]
wrote:

You wanna take over maintenance of the lib bud?
… <#m_-2046794364187891135_>
On Thu, Mar 28, 2019 at 10:13 AM Bryce Wilkinson @.*> wrote:
@pablo67340 https://github.com/pablo67340 https://github.com/pablo67340
The only thing that is brutal is you talking like this about someone who
"wasted" hundreds of hours to build a free slider that makes thousands of
people happy. Try to build this on your own. You'll either fail or "waste"
the next years perfecting this thing to please EVERYONE in the world FOR
FREE and still constantly get hate from people like you, because there is
always a better way to do it. Free or not, this issue was opened LAST YEAR.
There are over 150 comments, and its still sitting doing nothing. I
understand its something free, and people have better things to be doing,
making a living, etc. But when absolutely 0 shits are given about
established issues like this, that's when I have a problem. Not to mention,
the guy practically shits on people who gives ideas for enhancements and
fixes.
https://cdn.discordapp.com/attachments/510627683449962510/559904888700534805/unknown.png
Hop off buddy — You are receiving this because you were mentioned. Reply to
this email directly, view it on GitHub <#1207 (comment)
https://github.com/kenwheeler/slick/issues/1207#issuecomment-477612324>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARfmOinX69pXHzv1Vik-lF32gTySZoCks5vbM34gaJpZM4D6_WK
.

Wouldn't take 3 years to implement a fix someone else had to find. Can
tell you that much.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/1207#issuecomment-477613383,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAPRFh35XkPe2Dcrefwpl4nQFguFRvzwks5vbM6ygaJpZM4D6_WK
.

--

--
Justin Kruger
Social Media Software Engineer -
San Francisco, CA

--

http://jDavid.net
http://twitter.com/jdavid
http://www.linkedin.com/in/jdavid

--

jDavid.[email protected]

[ivan-khuda]

At the end of getLeft method
I add this

 if (_.options.variableWidth === true && targetLeft < 0) {
     var elTotalWidth = 0;
     this.$slides.each(function () { elTotalWidth += $(this).outerWidth(); } 
     var endOfSlider = window.innerWidth - elTotalWidth;
     if (targetLeft < endOfSlider) {
        targetLeft = endOfSlider;
    }
}

Maybe this will help someone

[danhumaan]

At the end of getLeft method
I add this

 if (_.options.variableWidth === true && targetLeft < 0) {
     var elTotalWidth = 0;
     this.$slides.each(function () { elTotalWidth += $(this).outerWidth(); } 
     var endOfSlider = window.innerWidth - elTotalWidth;
     if (targetLeft < endOfSlider) {
        targetLeft = endOfSlider;
    }
}

Maybe this will help someone

Looks good and works for me @Ivan1234, though you're missing some markup which breaks slick if pasted straight into the end of getLeft

this.$slides.each(function () { elTotalWidth += $(this).outerWidth(); } this line needs ); at the end of it. so the whole thing now looks like

if (_.options.variableWidth === true && targetLeft < 0) {
    var elTotalWidth = 0;
    this.$slides.each(function () {
        elTotalWidth += $(this).outerWidth();
    });
    var endOfSlider = window.innerWidth - elTotalWidth;
    if (targetLeft < endOfSlider) {
        targetLeft = endOfSlider;
    }
}

[epsilon42]

This is a bit of a hacky way of filling the whitespace but it works for my case if anyone else finds it useful. You may have to tweak it a bit for your situation depending on how many slides you need at the end to create the illusion.

Add it BEFORE you initialise your slider and it will add 3 slides to the end to fill the whitespace so the infinite scroll looks right.

To fill whitespace at the end with 3 more slides:

    $('.slider-container').on('init', function(){
      $(this).find('.slider-item[data-slick-index=0]').next().clone().appendTo($(this).find('.slick-track'));
      $(this).find('.slider-item[data-slick-index=0]').next().next().clone().appendTo($(this).find('.slick-track'));
      $(this).find('.slider-item[data-slick-index=0]').next().next().next().clone().appendTo($(this).find('.slick-track'));
    });

I have however noticed that it doesn't seem to work again after resizing from a responsive breakpoint. Think this would be easy to implement though.

In my case I have one breakpoint and moving from the lower width to higher width would cause the extra slides added with the above code to disappear. This bit of code fixes it for me:

    $('.slider-container').on('breakpoint', function(event, slick, breakpoint){
      if( window.innerWidth >= breakpoint ) {
      $(this).find('.slider-item[data-slick-index=0]').next().clone().appendTo($(this).find('.slick-track'));
      $(this).find('.slider-item[data-slick-index=0]').next().next().clone().appendTo($(this).find('.slick-track'));
      $(this).find('.slider-item[data-slick-index=0]').next().next().next().clone().appendTo($(this).find('.slick-track'));
      }
    });

For reference this is how my slider is initialised:

    $('.slider-container').slick({
      variableWidth: true,
      infinite: true,
      slidesToScroll: 1,
      slidesToShow: 1,
      responsive: [
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 99
        }
      }]
    });

I wanted all slides to display on mobile devices so setting slidesToShow: 99 meant that arrows and cloned slides are not visible and I could style the rest with CSS.

[dongepulango]

Who's from 2020?

[kafleg]

I am also facing the same issue.

[kimmo-dev]

Have same issue when I use:
_variableWidth: thrue,
centerMode: true,
infinite: true._
Then if I want to move from first slide back, last slide has about 1 seconds delay before it stay visible.