variableWidth: true, infinite: false not disabling the next arrow button when the last element enters the viewport
- Dominant language
- JavaScript
- Stars
- 11.9k
- Forks
- 2.1k
- PR merge metrics
- No merged PRs in 30d
Description
Issue:
When variableWidth is "true" and infinite is set to "false", next button does not get disabled when the last element enters the viewport. It keeps on scrolling leaving a whitespace after the last element.
Also is there any easier way to calculate "slidesToShow" variable? Max possible number of elements should be present in the screen and "slidesToScroll" should be "slidesToShow - 1" or 1 whichever is the higher.
```
const settings: Settings = {
className: "slider variable-width",
dots: false,
infinite: false,
centerMode: false,
variableWidth: true,
slidesToShow: numSlides,
slidesToScroll: numSlides,
};
```
```
{data.map((el, i) => {
return (
{el}
);
})}
```
Code sandbox:
https://codesandbox.io/embed/ncsf68?view=Editor+%2B+Preview&module=%2Findex.js
Contributor guide
Assessment
This issue has not been assessed yet.