Edit History

ok so I have managed to get this working, but i think something may be wrong somewhere.

When the page loads and it initialises the slick slider, you see the other images below the main image for a fraction of a second.. This is also causing the screen to flicker ( only noticable on mobile) when changing variants. You can see the flicker

Im not sure if this is the right way to do the jquery listeners etc.

/* SLICK-SLIDE FOR Prod Carousels */
$(document).ready(function(){
  // call the function on page load
  makeslider();
});

$('.page-content').on('DOMSubtreeModified', function(){
    // call the function on variant change
  makeslider();
});

function makeslider() {

	$('.prod-thumb-carousel').slick({
		useCSS: false,
		infinite: true,
		arrows: true,
		speed: 200,
		autoplay: true,
		slidesToShow: 1,
		cssEase: 'ease',
		slidesToScroll: 1,
		lazyLoad: 'progressive'
	});
}

Any help appreciated

You can see the flicker on this page when changing colours (noticable on a mobile device).

https://www.northwestecigs.uk/pen-style-kits/146-621-pockex-aio-kit.html#/126-colour-red_gradient

You can see the slider working here.

https://www.northwestecigs.uk/refillable-pods/460-1229-aspire-gotek-x-replacement-pods-2pk.html