React slider not showing last item after slickGoTo

Question

I have implemented react-slick. am facing issue when i place slickGoTo and slidesToScroll. When page load initially am calling slickGoTo to 4th one. once its done, it lose the control of slidesToScroll and last item is not visible.

   <div style="background: red; padding: 40px; margin: 0;"> <div 
class="firstDiv">
    <div><h1 style="font-size: 5em; margin: 0;">E</h1>
        Yay, this is a caption. Look, we're on the fifth picture!<br>But we can't scroll to the first picture in the thumbnails anymore :(</div>
</div>
<div class="thumbnails">
   <div><h1>A</h1></div>
    <div><h1>B</h1></div>
    <div><h1>C</h1></div>
    <div><h1>D</h1></div>
    <div><h1>E</h1></div>
    <div><h1>F</h1></div>
    <div><h1>G</h1></div>
    <div><h1>H</h1></div>
    <div><h1>I</h1></div>
    <div><h1>J</h1></div>
    <div><h1>K</h1></div>
    <div><h1>L am before last</h1></div>
    <div><h1>am last</h1></div>
</div>
enter code here

$('.thumbnails').slick({
slidesToShow: 5,
slidesToScroll: 5,
centerMode: false,
infinite: false
});
$('.thumbnails').slickGoTo(4);

http://jsfiddle.net/svx2dzwL/

I have same question asked in stackoverflow but not helping though. Slick Slider slickGoTo method breaking the carousel

Answer 1

Your problem is that some of the options you've set up are conflicting with one another. So right now you have 13 items there, how slick calculates your scrolls is that starts at 0 and goes +5, since you've added slidesToScroll:5.

So when you set slickGoTo(4) it goes to item 5, and now you have 4 items behind and 4 items ahead, so if you try to go back or forward you won't since the slidesToSroll: 5.

How you can solve this issue is to allow infinite scrolling, or lower the slidesToScroll to match the slickGoTo