Slick Slider 1st Image Not Showing

Set Up:
6 Slick Sliders set up in groups of two so that there are thumbnails for navigation.
Each pairing shows a different colour of the product.
The product colour is “selected” using MixItUp filtering plugin.

When you take the folowing steps:

  • Select a metal colour i.e white gold
  • Select the 2nd or 3rd image in the thumbnails ( from .slider-nav)
  • Select the 1st image again ( just the ring on transparent background)
  • Select a different metal colour

Expectation: The newly selected colour will show in the area (class name: .div-block-23-copy) like this:

Actual result: the 1st image is missing in “.slider-for” space:

Screen recording of issue: CloudApp ?


cc: @sabanna @samliew @Siton_Systems @webdev <-- Your tutorials/posts and direct advice have been really helpful so I thought I might tag you in hopes one of you have some insights into this