โ–ผ
Streaming live at 10am (PST)

Unique slider layout?


#1

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 :smile:


Looking for new examples of Sliders
Slider half and centered
My Webflow Wishlist
My business onepager - please feedback :)
My Webflow Wishlist
Carousel on steroids: Can the Webflow slider do this?
Help with Slider
#2

Hey @daniel_cleayweb I believe @sabanna actually made one with that functionality today! :smiley:


#3

Wow that would be awesome thanks @Waldo

@sabanna are you able to share any insights :smile:
I'm guessing there are some "overflow hidden" magic going on?


Custom Carousel Slider
#4

Owww, @Waldo, @daniel_cleayweb :smile: Hello guys!

Yes, I found workaround for such visual effect.
1) Make slider overflow: hidden
2) Make mask overflow: visible, width: 60% and center it (in display settings)
3) Make sure all SLIDEs has position:relative
4) Add images to all slides (will call it "main image"), width=95%, center it
5) Add 1 "extra image" to first slide and last slides
6) On first slide:
- "extra image" is same as "main image" on last slide
- position: absolute, align: left = -101%
7) 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


How can I achieve this slider?
#5

Sure all sizes and % you can rearrange as you need


#6

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


Multicolumn Centered Slider
Carousel with larger image/video in center side image dimmed
Slider Behavior When Displaying Multiple Slides at the Same Time
How can I make a sliding view of news stories
#7

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?


#8

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


#9

Thank you so much for sharing this with us :smile: ill have a play and share how I go :smile:
Thanks again Sabanna you webflow Ninja


#10

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 :facepunch:


#11

Ahahaha! :smiley: Thank you, it is very honorable nickname


#12

The dot cursor is from Google Chrome's inspector mobile view on Windows (I'm not sure about macos or safari)


#13

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


#14

Glad I could help! :smiley:


#15

@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! :grin: but one of the images is not lined up for some reason.


#16

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


#17

@sabanna thanks so much! You rock! Let me see if this fixes it!


#18

@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! :grin: thanks so much you're awesome!:+1:


#19

#20