react slick slider duplicate items when infinite true

[salmanbakhtiar786]

Why is slick adding cloned slides to my slider when I set infinite to TRUE and have only one or two items in the slider list? Can anyone help me to resolve this issue, all I need is to set INFINITE TRUE but want to remove duplicate items from slider if I have only one or two items.

I will appreciate your effort and thanks in advance.

[cuongcody]

check this https://github.com/akiran/react-slick/issues/1171 . hope it will fix ur issue

[wmtpratikk]

@salmanbakhtiar786 I'm facing same issue. Any Update on this ?

[egiv]

We found same issue too even without using infinite property by default. And I don't know why another issues closed. Please, does anyone can help about solution?

[Vijayaasri]

Hi I get the data from DB via API call But it display duplicate records. I added the

function SliderTest(file_name) {

const config = {

infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1

};

This is my slider

<Slider {...settings}>

    {data.map((x, i) => {

      return <div key={i} className="img-card">
        <img className="img" src={x.file_name} style={{width:'95%',height:'50%'}}/>
        <div class="card-body">
          <div className="card-title" style={{backgroundColor:'white',width:'95%',height:'50%'}}>{x.upload_title}</div>
          <div className="card-text" style={{backgroundColor:'white',width:'95%',height:'50%'}}>{x.upload_description}</div>
        </div>&nbsp;
      </div>
    })}
  </Slider>

Facing this bug 2days save my time.

[muhammadnaveedwarraich]

import Slider from "react-slick";
  const settings = {
    dots: true,
    infinite: false,
    slidesToShow: 5,
    slidesToScroll: 2,
    vertical: true,
    verticalSwiping: true,
    };,

And this is my slider

<Slider {...settings}>
        <h1 id="slide-1" key={0}>
          naveed
        </h1>
        <h1 id="slide-1" key={1}>
          naveed
        </h1>
      </Slider>

butt then i just import Styles file from package

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

[eleanor-arc-boats]

My issue wasn't showing duplicate slides but rather trying to wrap slides in an animated component and having the animation occur more than once. My solution was to query the DOM to find out if it was a cloned element and save the result in a ref.

const isAClone = useRef(false)
const ref = useRef(null)

 useEffect(() => {
    let element = ref.current
    while (element) {
      if (element.classList.contains("slick-cloned")) {
        isAClone.current = true
        return
      }
      element = element.parentElement
    }
  }, [ref])

  useEffect(() => {
    if(!isAClone.current){
    ...do some animation if the element is in view
    } else if(isAClone.current){
    ... do the animation even if the element isn't in view
  },[isAClone, other stuff]

  return (
    <animated.div ref={ref}>
      {children
    </animated.div>

[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).

[madhurgang]

Add - adaptiveHeight: true in sliders settings.