Slider with index/pager, CMS content and hash url

I’m trying to replicate the gallery of this site as an exercise to understand how can I apply something similar to a client site.

We can see a “slider” with custom cursor (I already know how to deal with that) and an index of images if we clic on center or above the image.
I want this to work with CMS images but I’m not sure how to start.
The main problem is that I like the idea of different URLs per image so people can share the link to a specific image but I like how fast it works without page refresh.
I’m currently working in a Collection Template and trying with “Image” and “Multi-image” Collection Fields.

I’m posting a public share link but I don’t think that would be useful in this case because I’m trying things at this moment.

I don’t need a step by step guide, just some tips to start with the layout and structure.

Thanks!

EDIT1: Tried with Magnific Popups but seems not to be a good solution.
Going to try with Tabs but I already know that different URLs per image is not a thing with Tabs.
EDIT2: Tabs doesn’t seem a good idea because I need Next/Prev. Running out of ideas :frowning:
EDIT3: Back to Magnific Popups, maybe if I can change the fixed lightbox to a DIV with z-index > image index (z-index) could work. Not sure about the URL thing but is the closest I got. Public Link updated.
EDIT4: I keep editing this despite I don’t see interest, let me know if you want me to explain how I’m doing. I think I’m close to a solution, maybe need some basic javascript help to finish the hash URL thing.


Here is my public share link: LINK
(how to access public share link)

I’m really close to a working solution but I’ll like to use background images with Cycle2 (instead of img) since it’s easier to “contain” them. The current problem is to make the “image-pager” working with background images.
I’m giving up on the “hash url” thing because I can’t see how to use this on webflow.

I’ll be glad to make a tutorial after this journey but need some help to finish it.