How to create a fullscreen image within a sliders mask

Hi @Nilson,

You might have come across my custom slider video tutorials while searching for answers.

I find really enjoyable to take this kind of challenge in a “pure” Webflow fashion, meaning not a single line of custom code. Your problem really made me think and I adapted my method to your problem.

Disclaimer : you won’t have the ability to use swipe gesture or autoplay as it will require some custom coding. If you need such features I would definitely recommend having a look to the awesome codepen of @Siton_Systems which is certainly more flexible and scalable. The man knows what he’s talking about :slight_smile:

But this is I think a nice work around for not coding :crazy_face:

Here how it looks like

http://lightbox-slider.webflow.io/

The idea behind it is to have 2 synced sliders. The first one is the one you already have (but custom made) and the second one is the fullscreen one). This way when you go to the next slide both sliders will stay in sync and therefore when you go full screen have the corresponding image.

And the beauty of it is that you can then set only one interaction for display the full screen slider (you could even add the arrows on the full screen version making you able to slide the full screen slides).

If it does fit your needs, I’m happy to share with you the project so you can take a look on how I implemented it and of course if something is unclear, just ask :blush:

Here you can find my video tutorials for the basics of my custom slider :

I hope it will help you.

Max

4 Likes