`infinite` mode does not work with `slidesToShow` less then or equal to slides count
- 主要语言
- JavaScript
- 星标
- 11.9k
- 派生
- 2.1k
- PR 合并指标
- 30 天内没有已合并 PR
描述
### Current behaviour
While setting `infinite: true` the slider does not work with `slidesToShow` less then or equal to slides count. While the number is equal, arrows and dots disappear. With lower numbers of slides, it just break the page.
### Expected behaviour
Expected behaviour should be to have enough cloned slides to make it able to scroll.
### Code
https://codesandbox.io/s/react-slick-playground-forked-iyvxj
### Workarounds
For now I am cloning the children myself using wrapper:
```tsx
import { FunctionComponent, Children, isValidElement, cloneElement } from "react";
import Slider, { Settings } from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const ForceInfiniteSlider: FunctionComponent = ({children, slidesToShow, infinite, ...other}) => {
slidesToShow = slidesToShow || 1;
const childrenArray = Children.toArray(children);
if (childrenArray.length == 0) {
return null;
}
let slides: JSX.Element[] = [];
while (slides.length <= slidesToShow) {
childrenArray.forEach((child) => {
if (isValidElement(child)) {
slides.push(cloneElement(child));
}
})
}
return {slides}
}
export default ForceInfiniteSlider;
```
_Note: This workaround use Typescript React as I code for my current project. If someone need similar workaround for JavaScript the idea is fairly the same._
贡献指南
评估
这个 Issue 还没有评估数据。