Slider with active thumbnail always centered below active slide

Design help Animations & Interactions
1

Hey y’all,

So, I’m having trouble creating something like this:

https://www.loom.com/share/b426ef9d0b7e448193ba470f6077c820

I apologize for not having a share link, but the company I’m working with won’t allow anyone outside of the organization to see anything.

Basically, it’s a slider with thumbnails and some special functionality, which includes:

  • The slide content is viewed by clicking a thumbnail or an arrow (standard)
  • The active thumbnail is always centered below the active slide (can’t figure this out)
  • All non-active thumbnails have a greyscale filter (not shown in video)

I understand this will involve custom code. I can’t figure out how to tweak this solution to behave in the manner I need it to.

Any insight would be greatly appreciated!