Hi @daniel_cleayweb and @sabanna, not sure if you’re still active on here, but I am looking to make this sort of slider-carousel as well. I might need a more remedial lesson… do you know of any tutorials that help lay out the process from step 1?
For instance I tried step two Make mask overflow: visible, width: 60% and center it (in display settings) and got the following message: 03|572x296
Hello!
Thanks @sabanna for this awesome walk through! I am having one issue however and was hopeful that you could help me out. When I attempt to follow the steps everything goes fine until I loop the last slide, when I position the last slide to absolute: right it shoots the image all the way to the left and lines it up with slide 2 for some reason. Any ideas?
It’s all about math/geometry. When you are moving “extra image”, you are positioning it relatively to the slide edge. Since your image is 70% of slide width and centered, which is 15% on each side, you need to move the image not on 101% left or right but 70+15=85%. Then extra images will be in the right position.
@sabanna your answer was perfect. Thanks for that. My new issue appears when i want to make the left and the right photos smaller and to have more transparency. I’m using legacy interactions (when slide into view, but the extra image is into view…).
All you slides/photos needs to be the same size (width) , otherwise it will not work properly, but you can add interactions that will scale the slide content down when slide is Out of view and scale back up when it is In to view. Also, you can add opacity change.
you can add interactions that will scale the slide content down when slide is Out of view and scale back up when it is In to view
@sabanna
Well, this makes sense, but there is a big BUT. Assuming you’re working on the first slide (it’s In to view), you have the main image and the extra one. If i add an interaction here, both of them will be in to view in the same time…so the interaction for Out of view won’t have effect for the extra image, even i’ll apply the interaction.
I didn’t implement this kind of slider navigation, but theoretically, you could set stack of numbers on top of each other (like layers) and make them appear-disappear based on slide in-view/out-of-view