Changing product page slide based on clicked variant

[no_robotocha]

Hello folks,

I am implementing a SwiperJS image slider as the product image gallery on the product page. I want this slider to update the current slide to the variant image when a variant is selected elsewhere on the page. I can use the swiper.slideTo() method to do this, but I'm finding this challenging as the ID of the images used in the gallery (coming from product.media.id) are different to the IDs used in the variant selector (variant.image.id). 

I need to use product.media to get all the images (I also pull the first image on the slider from a metafield) in the slider and I need to use variant.image as I want to display the variants in variant picker. 

Can anyone tell me the way to click a variant and then jump to the slide index whose image corresponds with the variant which has been clicked?

Thanks!