https://www.figma.com/proto/i7iQrW7ViDQJEDmkcZAVHc

It's kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.

CSS-Only Carousel | CSS-Tricks

https://css-tricks.com/css-only-carousel/

https://williammensley.framer.website/grid

https://framer.com/projects/Untitled--1wM4VQI82u6Suv5vZUrI-1ZfDs

https://energized-checkout-444422.framer.app/grid

https://posts.cv/ibro/qUfJkc3E3fw3MxjZiXK5

Sorry for the spelling mistake.  🚀 Ready to take your Framer skills to the next level? In this comprehensive tutorial, we'll show you how to create a smooth and interactive horizontal scroll in Framer, empowering you to design stunning user interfaces that stand out from the crowd. Whether you're a beginner or an experienced Framer designer, this step-by-step guide will walk you through the process, ensuring you grasp the key concepts. Scroll smoothness depends on the transition spring. Currently, I have this one, but if you try a better transition spring and it improves, go for it  #Framer #UIUXDesign #HorizontalScrolling #DesignTutorials #InteractiveDesign Contact: Sahil sahilchawlalm@outlook.com

Framer tutorial: Learn how to make a horizontal scroll #framer #nocode #horizontalscroll

https://youtu.be/0L7VeCOY1sg?si=oxIrxQ4SlQ3B29MK

I'm going to test it in many browser at the end just to make sure if it's working properly. Do you have Arc btw? Currently, I'm on the Windows waitlist for it :(

Oh yes, never mind. It had looked like the images were scaling to their aspect-ratio, but they're all the same :/

And I'm also struggling with Framer as the slideshow's images are all the same size and the carrousel isn't "draggable".

Here's the final prototype: https://www.figma.com/proto/i7iQrW7ViDQJEDmkcZAVHc

Yeah, I saw this and have tried too, but it seems like doing this in Webflow and Framer doesn't really make the frame scrollable

Yeah, I saw this. It's awesome for animations on the page, but I'm seeking to add a manual swipe for the user to see more images only for the projects they've liked :(

Idk how well this translates to webflow/framer, but flexbox with overflow hidden should get normal horizontal scroll. 
details on snapping: https://css-tricks.com/css-only-carousel/

Oh, hold on. What a weird thing. It swipes naturally both in mobile and desktop size when I use the inspector tool, but it doesn't work anymore when I get out of it lol what's happening

Oh god, being unemployed even influences the design of my portfolio now 😔

Btw, do you know if there is a way to make carrousels "draggable" or is it just for slideshows?

the easiest way to do it is I think to have a box that is bigger than the viewport. From that box you need to hide the overflow and remove the scrollbar with custom css

Oh really? the first one appears with a "blocked" cursor when I try to drag and doesn't scroll. But if it's working for you, I'm going to stick with it then!

The second one is a slideshow, but it fits each image in a specific ratio, so it's not flexible for what I'm looking for.

I'm trying to make it on Framer currently. It's bizarre because both Chrome and Microsoft Edge don't swipe at all on desktop. Here's what I've tried so far with carrousel, slideshow, and stack layout: https://williammensley.framer.website/grid

what kind of swipe gesture are you trying to build and what's the main issue you're running in?

Really cool. Might have to code this manually.

Sure! Here's the file: https://framer.com/projects/Untitled--1wM4VQI82u6Suv5vZUrI-1ZfDs

Would this require to add custom code? I can't write it as I'm on the free plan, unfortunately :(

I've also published what I've tried so far with the carrousel, slideshow, and the Stack layout here: https://energized-checkout-444422.framer.app/grid

unfortunately, their free plan is sooo limited 😔 if you want to add some nice features with a code you have to pay for a plan

It's really a simple swipe gesture like in Figma without the scrollbar. I'm trying to design my portfolio, but I'm struggling to design it on Webflow as the carrousel is a bit awkward +

So... the first has horizontal scroll for me everywhere. Second scrolls (with snapping) on mobile and drags on desktop. Third does not move anywhere. try testing in a new private window

Android: Bromite
iOS: Safari
Desktop: Brave

I think I already did that in some websites, can you share a read only link?

Are there any experts in Framer or Webflow here? I'm trying to find a way to add a swipe gesture on a flex div and it's driving me crazy

That's an intriguing interaction! But it scales only when you hover it instead of having different width sizes as default, right?

Just make sure it works for a couple other people too 😅 Sorry, no Arc, but I think it'd act the same as any other Chromium browser 
Also this (https://posts.cv/ibro/qUfJkc3E3fw3MxjZiXK5) might fix your aspect-ratio issue, if it doesn't add ten new problems

You’ll need to use something like swiper js. There’s a decent amount of cloneables that you can copy right into your project!

Had a similar challenge. This helped: https://youtu.be/0L7VeCOY1sg?si=oxIrxQ4SlQ3B29MK

How odd, and the same when it's published? Maybe something in the UI is intercepting the scroll 🤔 
Which are you using btw?

And here is my goal for the final design: https://williammensley.framer.website/

I just want to make the blue framer swipes oh lord 😂😔

Posts