Hello webflow friends,
Anyone ever do a slider like the one below? Off screen slider looks really sexy and just wanted to see if you awesome webflow forumers had cracked this layout? Or do we need a design challenge 
1 Like
Hey @daniel_cleayweb I believe @sabanna actually made one with that functionality today! 
2 Likes
Wow that would be awesome thanks @Waldo
@sabanna are you able to share any insights
I’m guessing there are some “overflow hidden” magic going on?
Owww, @Waldo, @daniel_cleayweb Hello guys!
Yes, I found workaround for such visual effect.
- Make slider overflow: hidden
- Make mask overflow: visible, width: 60% and center it (in display settings)
- Make sure all SLIDEs has position:relative
- Add images to all slides (will call it “main image”), width=95%, center it
- Add 1 “extra image” to first slide and last slides
- On first slide:
- “extra image” is same as “main image” on last slide
- position: absolute, align: left = -101%
- On last slide:
- “extra image” is the same as “main image” on first slide
- position: absolute, align: right = -101%
Example: http://spanglerestores.webflow.io
Cheers,
Anna
20 Likes
Sure all sizes and % you can rearrange as you need
1 Like
Yes, created it for my latest site http://singaporeschild.com.sg (mobile - landing - the round up)
Clicking on prev/next slide, swiping, and pagination buttons work as usual.
I made the previous and next slide images smaller using custom CSS, and hide / fade the descriptions using custom JS to monitor the state.
Also, feel free to contact me for further code help and/or customization of third-party plugins
4 Likes
Thanks for sharing, website looks great,its super clean. Did you build it in webflow?
Do you mind if I ask what you made your GIF with?
Yes, built in Webflow, then exported and coded into Wordpress due to features that Webflow doesn’t support yet (like ad management, contest, user registration + login, etc.).
Without Wordpress: http://singapores-child.webflow.io
GIF made with LICEcap.
Also, feel free to contact me for further code help and/or customization of third-party plugins
Thank you so much for sharing this with us ill have a play and share how I go
Thanks again Sabanna you webflow Ninja
1 Like
Cheers, I use LICEcap, but cannot get the dot for the mouse like you have, strange.
Man I can see you have put a lot of thought and time into the design, congrats man 
Ahahaha! Thank you, it is very honorable nickname
The dot cursor is from Google Chrome’s inspector mobile view on Windows (I’m not sure about macos or safari)
1 Like
Wow its works, thank you very much, now i’m off to make something cool.
Here it is, only did it for desktop http://l-a.webflow.io/cards
3 Likes
Glad I could help!
1 Like
@sabanna what am I doing wrong here? https://preview.webflow.com/preview/testingblog?preview=943205315bebf0055ad9a38f422798d1
When it plays, the extra image on first and last slides are not working properly… By the way thanks so much for the awesome slider!
Edit: Nevermind I figured it out! 
but one of the images is not lined up for some reason.
Hello @Quantumgo,
Instead of using negative margins for extraimages you should use absolute positioning
And since you have “regular” images smaller than slide (95%) extraimages will be moved not on 100-101% but less (97-98%).
Cheers,
Ann
@sabanna thanks so much! You rock! Let me see if this fixes it!
@sabanna okay so I have it almost perfect but it’s off just a hair! I just need to play with it and get the perfect percent! thanks so much you’re awesome!
1 Like