CODEWITHSUNDEEP
reactjsreact-slick
Sagar Acharya
Sagar Acharya

Reputation: 1871

React-slick shows 5 slide elements in DOM when i have added two slides in view

I have two elements in the slider. I noticed that it actually creates 5 other slides. They have data-index varying from -1 to 3.

enter image description hereRendering just one element does not have this issue. It only shows a single element in the DOM.

The component I am rendering is in position 1.

Is there any way to remove the clone slide elements in the DOM?

The problem I am having is that the slides at position -1 and 3 have a div with the same id.

Now when I do document.getElementById() , I do not get the properties of the actual component in view.

`

Upvotes: 0

Views: 1719

Answers (1)

Sagar Acharya
Sagar Acharya

Reputation: 1871

Looks like you can just pass {infinite:false} prop into the options and the issue is solved.

This is because react slick maintains two divs at both sides of the current element in view. This is to ensure that slide can happen even if the user scroll both ways.

Passing this prop negates that behaviour

Upvotes: 2

Related Questions