I build an Slider with CMS images in it. By clicking on an image, a fullscreen preview of the image is shown via interactions.
However, I need the same interaction more often on the page and would therefore like to make the fullscreen images to become a children of the slides (so I can set the interactions to "Class- only children). BUT if I drag the fullscreen div´s inside the slider mask,- they are only shown inside the slider mask…
My goal is to display the entire section “Printshop Section” several times, each with different collection items.
Because I use an interaction to trigger the “fullscreen slide” divs, it is required that the “fullscreen slide” divs become children of the triggers called “Slide1, Slide2 and Slide 3”. Then it is possible to limit the interaction just for children. But if I do so, the “fullscreen-slide” -divs appear only inside the slider mask.
So what I want to find out is, how to create a fullscreen image within a sliders mask.
So I’ve had a play with this, you cannot use a full screen div within a slider it seems because of the mask which has settings of overflow: hidden (to hide the other slides).
With a static slider this isn’t an issue as you could create the interaction to an element outside the slider… in this case you want to display connected dynamic info, which is the issue.
In my head I’m thinking of a possible workaround.
If what I’m thinking even works it would mean the image would show up in the native lightbox style, so you wouldn’t be able to style it. (So dark background with image and more images at the bottom).
I have no idea if it will work, but I’m happy to try if it’s an end result you can use, but please let me know if it’s not suitable.
Good morning @magicmark!
Yes I thought about the lightbox, but as you said, it can not be styled
Do you think it´s possible to to build a custom slider just with interactions? Or do you know if anyone did this before? Can´t find something like this in the forum.
Cheers, Nils
Ouh damn @magicmark! You need to sleep! But I´m with you… It´s a simple and at the same time huge problem. I´ll ask @Siton_Systems! Thank you for the contact. I´ll let the community know if I got a solution! Cheers and greetings from East Germany! Nils
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
But this is I think a nice work around for not coding
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
Here you can find my video tutorials for the basics of my custom slider :
Hi @Siton_Systems - thank you really much for the quick and in detail answer!
As I can see, the swiper with photoswipe works very well and does exactly what I need.
But as you can imagine,- the solution is too difficult for me…
And of course, I would like to have a pure webflow solution if possible.
So… i keep searching. Thank you!
@Maximosaurus… awesome! So there seems to be a solution at least
I took a look at you slider and its exactly what I need! And it doesn´t matter, that there is no ability to swipe on touch devices. This is what I love on webflow… the ability to create such things without code, just with creative ideas like yours.
So yes, I would love to see your live project!
Thank you,- Nils
Don’t hesitate if you need extra help to get it setup.
PS: I noticed an unexpected shift on the slides which don’t take 100% of the space. I’m still trying to figure out where it come from… But it doesn’t affect the way it works.
Do you have any idea how to solve the problem? Cheers, Nils
!
