akiran / akiran/react-slick

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

Abierto
#2,050 0 comentarios 6 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
11.9k
Forks
2.1k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.