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

[martinfrouin]

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>;
}

[bymoe]

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

[pdhung197]

I faced with same bug, my temporary fix:

infinite: items.length > 3

I have to sign in to like your comment. LoL. It saved my time. infinite = items.length > slidesToShow

[raulbarriga]

I tried implementing the items.length solution but it didn't work on my end; the .slick-cloned div still repeated the items. Thus, I just added display: none !important; to .slick-cloned css class which is the class that has the repeated items. Note: it'll still show up on the DOM, just not display it over again.

Update: On second thought, I just decided to try to remove the DOM node of the .slick-cloned class. Thus, I used this code snippet:

useEffect(() => {
    // var list = document.getElementById("myList");   // Get the <ul> element with id="myList"
    // list.removeChild(list.childNodes[0]);           // Remove <ul>'s first child node (index 0)

    const slickTrack = document.querySelector(".slick-track");
    if (slickTrack) {// if it's mounted on the DOM already
      slickTrack.removeChild(slickTrack.childNodes[1]);// removes it from the DOM
    }
  });

This works! And I can now just put infinite to true lol

[odunet]

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.

infinite = items.length > slidesToShow

Thanks everyone, SnowDiamond's solution above worked for me. Does anyone know when we would be getting a permanent fix to this.

[michael-solomon-keffa]

I was facing this issue but using map function of the same data fixed the issue for me

[amIToan]

I also have the same problems above , just fix it !!! please

[coderguy2000]

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>;
}

Thanx its work

[neharadialcode]

not working

[Nagibaba]

In my case, it was due to dynamically changing data.

  <Slider {...settings}>
    {data.map((item, index) => (
      <HomeDropProxy item={item} key={index} />
    ))}
  </Slider>

So I added a condition:

{data.length > 0 && (
    <Slider {...settings}>
      {data.map((item, index) => (
        <HomeDropProxy item={item} key={index} />
      ))}
    </Slider>
)}
 

[johnnyrwest]

2023 and still running into this issue—thank you @SnowDiamond for the workaround!

[derikhunt]

Hi. I am running into a similar problem. If you set infinite to true it is duplicating the slides. I have noticed that slick carousel doesn't seem to have the same duplicate problem as react slick. The issue is making it to where I am unable to make a video play when it is shown without a duplicate copy playing in the background. The id/ref/index used are duplicated with the originals which causes the shown video to play as well as the one that is hidden and never seen.

Is there any fix yet to prevent duplicate slides from being created when infinite scroll is true? I've tried everything to work around the issue.

[miltonbolonha]

same in 2024

[7Luke7]

const settings = useMemo(() => {
return {
speed: 200,
infinite: productImage.length >= 7 ? true : false,
slidesToShow: productImage.length >= 7 ? 7 : productImage.length,
swipe: false,
adaptiveHeight: true,
slidesToScroll: 1,
arrows: false,
lazyLoad: true,
responsive: [
{
breakpoint: 768,
settings: {
speed: 200,
swipe: false,
infinite: productImage.length >= 3 ? true : false,
slidesToShow: productImage.length >= 3 ? 3 : productImage.length,
adaptiveHeight: true,
slidesToScroll: 1,
arrows: false,
lazyLoad: true,
}
},
]

    }
})

this will help set infinite and slides to show according to amount of images or items you server for example if you have less items than what you had intended to show just show all of it this way it will be less and work perfectly do the same for the infinite, this should work.(worked for me).

[Noushad-web]

I faced with same bug. Thanks @SnowDiamond for the work around.

[madhurgang]

Add - adaptiveHeight: true in sliders settings.

[MshengYang]

faced with same bug