Как реализовать галерею изображений с вертикальной прокруткой с миниатюрами и прокруткой на мобильных устройствах? ⇐ CSS

[Anonymous]

Я пытаюсь создать галерею продуктов, похожую на галерею продуктов на странице продуктов Gymshark (ссылка), для страницы продуктов моего интернет-магазина. Галерея должна работать следующим образом:
Версия для настольного компьютера:
Миниатюры продуктов должны отображаться в вертикальном прокручиваемом столбце слева.
Когда пользователь нажимает или наводит курсор на миниатюру, основное изображение справа должно соответствующим образом обновляться.
Индикатор прогресса прокрутки должен показывать, как далеко пользователь прокрутил миниатюры.
Мобильная версия:< /p>
На мобильных устройствах я хочу, чтобы галерея переключилась на горизонтальный слайдер изображений с возможностью перелистывания (с помощью чего-то вроде Swiper.js или карусели начальной загрузки).

Подробнее здесь: https://stackoverflow.com/questions/790 ... -swiper-on