React-slick: double items showed

[AndriiUhryn]

SliderProps: {
slidesToShow: 2,
infinite: true,
}

With these props if you pass to the slider only 1 item, it will show cloned one under the first slide.

[AndriiUhryn]

Hi, when can I wait for the react-slick npm update according to these issue?)

[BlueSolar88]

Is there any workaround until you update this?

[SnowDiamond]

I faced with same bug, my temporary fix:

infinite: items.length > 3

[matejm91]

I'm having the same issue, @SnowDiamond's solution helped, but to give more info about this issue, I belive it happens if item number is smaller then slidesToShow
In my opinion there should be a trigger that sets infinite to false if item number is smaller than slidesToShow

[tinmar33]

You can create a state for infinite, and check if your array is big enough to put infinite on true:

infinite: this.state.infinite,

if (yourarray.length <= 2) {
    this.setState({infinite: false})
} else {
    this.setState({infinite: true})
}

[michaelCaleyWhaley]

I am experiencing this problem but finding that it occurs unless the slides to show number is smaller than the item length

[tevdi]

I am experiencing this problem but finding that it occurs unless the slides to show number is smaller than the item length

The solution provided by SnowDiamond should work.

[narendersaini32]

infinite false can do the job

[radscheit]

@narendersaini32

infinite false can do the job

A potential quick-fix, but not a solution for the problem.

[modbender]

I have something like this for the workaround:

import Slider from "react-slick";

import Slider from "react-slick";

export default function Carousel({ children }) {
  const settings = {
        dots: true,
    infinite: children.length > 4,
    slidesToShow: 4,
  };

  return <Slider {...settings}>{children}</Slider>;
}

[ImSolitude]

It's 2020 already, just fix it.

[gada121982]

I got the same problem . :(.

[MalvinJay]

Got this error and it took me precious nights to see this quick workaround provided by SnowDiamond. @React-Slick

[MarkAPhillips]

If you are using typescript and defining the type of children as ReactNode you will get an error when using length.

I solved this by using the following:

const MAX_SLIDES = 7; 
const infinite = children ? React.Children.count(children) > MAX_SLIDES : false;
  const settings = {
    dots: true,
    arrows: true,
    infinite,
    speed: 500,
    slidesToShow: MAX_SLIDES,
    slidesToScroll: MAX_SLIDES,
  };

return(<Slider {...settings}>{children}</Slider>)

But agree surely a fix can be put in for this?

[ashkan-pm]

This problem is there for me even with infinite: false. (I'm using Ant's Carousel component which uses React Slick)
This is the third unresolved issue I have run into in a single night for the simplest use case using this library :(

[LauraBeatris]

There's also another problem - What happens if there's a different value for slidesToShow for each device breakpoint?

We would have to verify the current breakpoint and then access the responsive array settings to grab the slidesToShow value.

[SigitaD]

There's also another problem - What happens if there's a different value for slidesToShow for each device breakpoint?

We would have to verify the current breakpoint and then access the responsive array settings to grab the slidesToShow value.

@LauraBeatris did you happen to find a workaround for this specific problem?

[fderen-dev]

Information about slidesToShow in current responsive is stored deep down in slick guts.
slickRef.current.innerSlider.track.props.slidesToShow

[samirarezai]

infinite: items.length > 3
it's the great way
thanks SnowDiamond