infinite doesn't play nicely with variableWidth and focusOnSelect

[walmink]

Intention

I am trying to create an infinite slider that will display a set of items, where the items have variable width and a click item gets focus on select (moves to left edge of slider component) when clicked.

Problem

In many (but not all cases), Slick React scrolls to cloned version of the clicked item, instead of the item itself.
See example.

What's working:

• From index 0 (start), click on item -1 (left of item 0, visible because overflow: visible)
• From item -1, click on item 0
• From item -1, click on item 1
• From item -1, click on item 2

What's not working:

• From item 0, click on item 1 => scrolls to wrong item
• From item 1, click on item 2 => scrolls to wrong item
• From item -1, click on item -2 => scrolls to wrong item

(these lists are not exhaustive, obviously, just as an example)

[rival14]

Try to add this css
In my case it working because I set infinite true and set slidesToShow to more than length of image, so it will create cloned element and below css fixed my issue
.slick-slide.slick-active.slick-cloned {
display: none !important;
}

[moreginger]

I just ran into this too. Very confusing. It makes focusOnSelect unusable with variableWidth, as it almost always scrolls through all the elements when trying to move forward a single index.

[mustafakunwa]

any solution for this i'm also facing this issue