I am trying to create a product gallery similar to the one on the Gymshark product page (Link) for my ecommerce store product page. The gallery should work as follows:

Desktop Version:

The product thumbnails should be displayed in a vertical scrollable column on the left side.
When a user clicks or hovers over a thumbnail, the main image on the right should update accordingly.
A scroll progress indicator should show how far the user has scrolled through the thumbnails.
Mobile Version:

On mobile, I want the gallery to switch to a horizontal swipe-able image slider (using something like Swiper.js or bootstrap carousel).