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).