This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Mar 31 - Read on Facebook

I've seen quite a few people asking about Carousel views lately so I figured I'd whip up a quick example as it's something I'll need soon as well.

If you have any suggestions on how this could be improved, let me know and I'll do what I can to make improvements.

http://jrdn.io/aIEx

22 Comments

Chris Camargo

Awesome sauce!

Jordan Robert Dobson

A few things to note... If you want to make the panels full screen, change the PANE_INSET to 0. This should adjust to fit any device as well.

Jordan Robert Dobson

Also, this will move to the next / previous pane in the carousel once you drag past 1/3 of the screen or if your drag velocity is .5 or higher. Those can be adjusted in the resolveDrag function. :)

Braden Hamm

So smooth

Calvin Wilson

Nice!

Jordan Robert Dobson

I really tried to keep the code clean and easy to read for you guys. I truly hope it helps make sense of how these things can be pulled together.

Jordan Robert Dobson

Thanks Braden and Calvin. :D

Josef Richter

cool. now you should turn it into reusable module actually ;-)

Josef Richter

btw. the (c) comment in the file says 2014...

Jordan Robert Dobson

^ Fixed. Thanks... You'd think I'd have that down by now. :P

A module is definitely in the works. I plan to make a class of it possibly and a module. I'd like to see how people want to use it first though. Also, I think something will be coming out that replaces the need for this very soon too. :D

Alex Bystrov

Jordan Robert Dobson Excellent work, thanks! Something strange happened while adapting it to my needs though. The project compiles in Framer Studio, but returns an error when I try to enter the presentation mode (and black device screen when Sharing). Any ideas? (sorry about the dirty code, I'm quite a noob in any sort of coding) http://share.framerjs.com/qeqylxq9rqgj/

Jordan Robert Dobson

You need to upgrade your project and move your code into it. That fixed the issue for another person. I think it's a bug in earlier builds.

Alex Bystrov

Thanks, it worked! As the matter of fact the conflict is somehow related to replacing /framer folder by the one here https://github.com/dabbott/FramerScrollPhysicsDemos which I needed for the inertial dragging. But since It's impossible for me to figure out, what is the nature of this conflict exactly, I guess I will have to figure out a way to stay out of inertial dragging.

Nick Bewley

This is awesome thanks Jordan. Also lovin the framerco.de site! I have been messing around with this for a while, but cannot figure out how one would define the panes as imported sketch layers.. Any ideas to point me in the right direction?

Jordan Robert Dobson

Yeah. I'll send you some help in a few hours.

Nick Bewley

Hey Jordan sure that you are busy making great modules, but if you have a second, mind pointing me in the right direction as to configuring imported screens in place of your carousel panes. A brief idea or two could be all I need to push me in the right direction. Thanks!!

Jordan Robert Dobson

Ahhh! I lost where I supposed to respond.

Nick Bewley

Haha all good man! Would appreciate any pointers when you have a second ;-)

Jordan Robert Dobson

Nick Bewley - This may help? http://share.framerjs.com/5zrtc87e5s96/ @ The bottom I added how I would include Sketch layers. I don't use sketch so I can't help there.

Jordan Robert Dobson

It also adapts to the watch pretty well.

Nick Bewley

Jordan thanks a ton man! Makes a ton of sense now after seeing it in action!!

Read the entire post on Facebook