`infinite` mode does not work with `slidesToShow` less then or equal to slides count
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.9k
- Forks
- 2.1k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
### 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._
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.