Slick slider render slide multiple times in reactjs - reactjs

Question

I am creating slick slider by using reactjs. Slider working fine but it renders slide multiple times. I am looping the slide using map function.
screenshots:
my scripts:
import React, {Component} from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import '../css/Header.css';
//import SlideItem from './SlideItem';
class SliderSlick extends Component{
shouldComponentUpdate () {
// TODO: add proper implementation that compares objects
return false;
}
render() {
//Slide Items
var sliderItem = ['slider1.jpg','slider2.jpg','slider3.jpg'];
var settings = {
autoplay: false,
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 1000,
};
return (
<div className="container">
<Slider {...settings}>
{
sliderItem.map((item,index) => {
return (
<div data-index={index} key={index}>
<img src={process.env.PUBLIC_URL + '/images/'+item} alt="Continental GT 650" />
</div>
)
})
}
</Slider>
</div>
);
}
}
export default SliderSlick;
what am I doing wrong?

Answer 1

This is not a bug, it's a feature for having a best performance with animation in last item with next first item !.
this is just how slick slider infinite-loop works.
If slider would only clone images/divs it would end up with a performance issue.
Now, if really you don't want clone images/div then you need to set
infinite: false
or
infinite: sliderItem.length > 3 // may be best solution