White space displayed after scrolling through last slide when infinite is false

[WtheFourth]

When using a carousel that shows multiple slides at a time but only scrolls one, the user can scroll until the last slide is the only slide visible.

See: http://jsfiddle.net/Lbkfv/

[kenwheeler]

This is now fixed. You can set placeholders to false in the options. I updated my one-time example to show that.

[WtheFourth]

Thanks, Ken! I'll test it out in my application first thing in the morning.

[kenwheeler]

No problem at all. If you find anything else that sucks , or anything that would be helpful, please let me know. I take making this carousel the shit very seriously lol

[OceanWind]

Hey Ken,

I love the clean workings of your plugin. A couple of issues I've run into:

On infinite loop: 1) When the last div is scrolled to (moved over to the left), its link gets disabled 2) I can't get the final scroll to work without jumping over a significant number of items. I'm forced to set slidesToScroll to 1 or 2 to get it to work :-(

On noninfinite loop: My divs wrap displaying two lines

Check it out here: http://sacredfirefoundation.org/sacred-fire-magazine

and here: http://sacredfirefoundation.org/ancient-wisdom-resources

[kenwheeler]

Hi @OceanWind ,

I would use interior padding and box-sizing: border-box instead of margins on your slides.

[OceanWind]

Excellent solution for the spacing issues, @kenwheeler. That definitely helped. But I'm still getting the problem of it jumping past the last slide at the end of the infinite loop. Any ideas?

Check it out: http://sacredfirefoundation.org/sacred-fire-magazine

I've set it to: infinite: true, slidesToShow: 5, slidesToScroll: 4,

And thanks for being there to help debug things like this!

[kenwheeler]

Hmm. Let me check it out. Might be a math issue.

[lupoair]

Hey Ken, I don't know if it is a similar issue, but I get some undefined white space on the right side of my center mode slick.

I can only get rid of it with

html, body { overflow-x: hidden; }

so far. Which messes up scrolling on iOs.

Do you have an idea what's wrong?

[kenwheeler]

Its the arrows. Either arrows:false, or style them to not be outside the container.

[lupoair]

Thanks, you are doing an awesome job!

[nawrasbaghdadi]

hi Ken, i'm facing issue that in wide screen all the element of the slider will appear with some white space at the end and pressing next button will show more white space , http://jsfiddle.net/nawras11/ofesgwb0/

[JSeligsohn]

+1 to nawrasbaghdadi - having the same issue.

[horatiua]

+1

[rameezwp]

Excellent solution for the spacing issues, @kenwheeler. That definitely helped. But I'm still getting the problem of it jumping past the last slide at the end of the infinite loop. Any ideas?

Check it out: http://sacredfirefoundation.org/sacred-fire-magazine

I've set it to: infinite: true, slidesToShow: 5, slidesToScroll: 4,

And thanks for being there to help debug things like this!

Any solution to this issue?

[Sara6865]

hi ken,I've this problem too its my code: $('.video-cards-container').slick({ dots: false, infinite: false, speed: 300, slidesToShow: 6, swipeToSlide: true, rtl: true, responsive: [ { breakpoint: 1400, settings: { slidesToShow: 6, } }, { breakpoint: 1024, settings: { slidesToShow: 5, } }, { breakpoint: 600, settings: { slidesToShow: 4, } }, { breakpoint: 480, settings: { slidesToShow: 3, } } ] }); when i change infinite to false,at the end shows empty box before the first slide.

wuold you help me plaese???? @kenwheeler

[Sara6865]

[arshil-ctas]

i had same issue of white space aftr the last slided slided and gone from viewport, it seems even after 10 years there is no solution for this