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

@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

I've got the same problem.

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

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

Thanks!

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

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

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.

Any update here?

+1

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

+1

Bump & +1.

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

+1

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

infinite: false did not solve my whitespace issue..

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

I also described this issue in: #1334

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://[email protected]/diegopamio/react-slick.git",

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

any progress on this issue?

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

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

+1

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));

+1

Hi, this is also an issue when using swipeToSlide. It seems like the issue is inside innerSlideUtils.getTrackLeft

https://jsfiddle.net/fjLhxrqt/

+1

bump +1

+1

afterChange = () => {
const lastSlide = document.querySelector('.slick-slide:last-of-type');

const bounding = lastSlide.getBoundingClientRect();

if (bounding.x + 315 <= document.querySelector('.Slider__wrap').clientWidth) {
  document.querySelector('.slick-next').style.display = 'none';
} else {
  document.querySelector('.slick-next').style.display = 'block';
}

};

What element has class slick-next?

finally worked , add this simple CSS code in to your project

.slick-next{
right:10px;
z-index: 1000;
}
.slick-prev{
left:10px;
z-index: 1000;
}

Not able to find the exact solution, but if you keep slidesToShow as an even number you will not face this problem

+1

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

.slick-slider {
  overflow: hidden;
}

+1

our timer show 28/01/2022 but still can not find solution:)

The best solution for this is to switch to an alternative swiper library, like swiper.js.
Doesn't seem like the maintainers are actively trying to solve this.

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

.slick-slider {
  overflow: hidden;
}

this solved my problem

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

.slick-slider {
  overflow: hidden;
}

It worked for me thankyou.

In the slider settings object slidesToShow and slidesToShow keys should be changed according to the UI
in my case on desktop I'm showing 4 slides and on click of slider arrow I'm just moving 1 slide

let settings = {slidesToShow: 4, slidesToScroll: 1}

this worked for me, also these values can be changed depending on viewport width by adding the responsive key to the object

with tailwind

<Slider className="overflow-hidden">

works for me

+1