For a design portfolio I’m trying to build a horizontal Slider / Carousel of full-bleed images, one per project. Each image, when clicked, should open an acccordion with the content according to this project below, turning it into a scrollable page (when I’m one step further this should also disable the left/right sliding). Another click on the image should close the accordion again.
My problem is: From the tutorial it seems that both the Slider and the Accordion need a nested structure, and they cannot reference to something outside of that structure (is this correct?). I would like to have a click on slider-image 1 open content 1, a click on slider-image 2 open content 2 and so forth. But I can’t seem to get that working.
I attached an image of a sketch file to show the Layout I’m aiming at.
Your idea looks interesting, and I am pretty sure you can achieve it without the dropdown widget. Use the slider widget to create all you pages, full sized, and then wrap the opening content with a div.
Now you can trigger this divs display with an interaction (button or slide)
Hey @avivtech , sorry for coming back to this so late, didn’t have time to work on it recently.
That worked, thanks a lot!
So the nested “accordion” method described in the Webflow tuturoial series was actually just one way of naming and structuring the layers, nesting them is not required at all, to make it open and close (for the slider it is, I think). The problem why hadn’t been able make it work is that I had overflow on. So when I wanted to close the div, it just stayed in place.
Wait no, it doesn’t quite work yet. Earlier today I just made the whole slider a child of the trigger div. But my goal is to make each slide a single trigger to accordion content. But when I place any interaction triggers inside one of the slides and the aimed content outside, I can’t get it to work …
