.slick-active not on correct slicks

https://codesandbox.io/s/jlk8n3z9v9

1. Inspect the elements, found `slick-active` class name is added properly to the first 4 slicks.
2. Click `>` arrow button to flip to next page.
3. Inspect again, now `slick-active` class is added to elements outside the viewport.

We can only detect the active items on the viewport when we can see accurately which ones are active slicks.