akiran / akiran/react-slick

`infinite` mode does not work with `slidesToShow` less then or equal to slides count

Aperta
#2,050 0 commenti 6 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
11.9k
Fork
2.1k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 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._

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.