Empty space at the end - Githubissues

andricicezar commented 8 years ago

How can I stop the carousel to let that empty space at the end?

I don't want infinite or center mode.

https://jsfiddle.net/20bumb4g/1576/

Thank you

ghost commented 7 years ago

i also have the same issue of the extra space at the end

VasilyShelkov commented 7 years ago

@fahd what parent are you suggesting to set overflow:hidden on ? I'm finding that none of the parent containers work in hiding the empty space when overflow is set to hidden :S

mthines commented 7 years ago

I've got the same problem.

When reaching the end of the list you can scroll further like shown in the gif below.

continuos scrolling in the end

Is there anyway to solve this problem with settings or would this be considered a bug? :)

Thanks!

alexjfno1 commented 7 years ago

Has anyone managed to get anything working for this? Having the same issue.

THPubs commented 7 years ago

Ok I solved my issue! I added a custom style to the slick-slide class to remove a small line on the right.

Screenshot

Can you see the small light blue line on the right? To fix it I did this:

.slick-slide{
  margin-right: 1px;
}

That rule caused the issue. So, in your case also there might be something which overflows the slider. I think if the inner content overflow, this happens.

codermango commented 7 years ago

Any update here?

piersolenski commented 7 years ago

+1

aakashlpin commented 7 years ago

Any update here? This is kind of a show stopper.

harshitkumar31 commented 7 years ago

+1

calebo commented 7 years ago

+1

vvasyliev commented 7 years ago

+1

dancnnm commented 7 years ago

+1

Rusya13 commented 7 years ago

+1

robertSahm commented 7 years ago

+1

CorwinCZ commented 7 years ago

Bump & +1.

vhmth commented 7 years ago

https://www.useloom.com/share/ea64a9ea40e44344872ec6b0c75add9b

KODerFunk commented 7 years ago

+1

inmutato commented 6 years ago

+1

djuta commented 6 years ago

+1

markmanx commented 6 years ago

+1

rafaelderolez commented 6 years ago

+1

freott commented 6 years ago

+1

laveesingh commented 6 years ago

This has been resolved now. All you need now is to set infinite: false. Refer to the example: https://github.com/akiran/react-slick/blob/master/examples/UnevenSetsFinite.js

ro0t commented 6 years ago

infinite: false did not solve my whitespace issue..

dryleaf commented 6 years ago

@laveesingh @ro0t @mads-thines Did you anyone find a solution to this problem?

I also described this issue in: https://github.com/akiran/react-slick/issues/1334

diegopamio commented 6 years ago

I've made a fix (#1337) that would allow the finite variable width slider sliders to always fill the display area, using a new setting. I've added the pull request, not sure if it will be handled soon. In any case, you are free to use my own fork in your package.json: "react-slick": "git+https://git@github.com/diegopamio/react-slick.git",

But ideally, if you can, also please vote so that the pull request gets attention.

Razum commented 6 years ago

any progress on this issue?

dryleaf commented 6 years ago

My ideal scroller would be the one that is:

finite
Variable width
scrolls all 100% visible slides at a time (irrespective of viewports or screen width)
with no paddings or centerings

diegopamio commented 6 years ago

Done. I've updated the PR with those requirements.

imprfekt commented 6 years ago

This has been resolved now. All you need now is to set infinite: false. Refer to the example: https://github.com/akiran/react-slick/blob/master/examples/UnevenSetsFinite.js

This is NOT resolved. Did you take into consideration variableWidth elements?

Sidorii commented 6 years ago

I found solution that works for me. I slightly changed Slick.prototype.getLeft method inside the library. So, I put additional condition at the line 1097 like shown below: } else if (slideIndex + _.options.slidesToShow === _.slideCount){ //remove additional space at the end of carousel _.slideOffset = Math.abs($('.slick-slide').outerWidth() * _.options.slidesToShow - $(window).width()); }

Pionell commented 5 years ago

bump +1

twentyoneisawesome commented 5 years ago

bump + 1,

Simonpedro commented 5 years ago

+1

webdevpchoi commented 5 years ago

Hi guys, for anyone still having this issue; I fixed it by making sure that slidesToScroll was set to the same number as slidesToShow. I recognize that this isn't ideal, especially if you need to scroll slides less than the number you're showing, but in my case, it didn't matter.

const settings = {slidesToScroll: 6, slidesToShow: 6}

eyaldouwma commented 5 years ago

if anyone still face this issue... i fixed this by setting the overflow as hidden to the Slider container

joshianuj commented 5 years ago

bump +1

ramirodimodica1 commented 5 years ago

I create a PR, can you review please? thanks.

ramirezcgn commented 5 years ago

This fix the issue for me, Thanks!

groomain commented 5 years ago

+1

SerhiiBychok commented 5 years ago

+1

twentyoneisawesome commented 5 years ago

This is my solution. in innerSliderUtils.js, ln. 266 => targetSlide = Math.min(Math.max(0, spec.slideCount - spec.slidesToShow), currentSlide + slideOffset); ln. 463 => newSlide = Math.min(Math.max(0, spec.slideCount - spec.slidesToShow), currentSlide + getSlideCount(spec));