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

What is Framer? Join the Community
Return to index
Michał Maciejewski
Posted Aug 24 - Read on Facebook

I'm very beginner in framer and i wanted to ask is it possible to make loop carousel like this one (Myltiple items example) in framer?

How can i do that?

Here is my wireframe:


Koen Bok

Yep these are relatively easy to make with a PageComponent, a click event and the .nextPage() method. That said, if you're just beginning there is always a bit of a learning curve. I'd say a good Saturday afternoon should both get you there, and give you a basic understanding of the syntax and Framer building blocks. Start at our site with the guides for programming and Framer. Ask here for help if you get stuck.

Michał Maciejewski

forward = new Layer
width: 50
height: 50
backgroundColor: "rgba(255,92,110,1)"
x: 341
y: 275

next = new Layer
width: 50
height: 50
backgroundColor: "rgba(111,255,77,1)"
x: 462
y: 275

layerA = new Layer
backgroundColor: "rgba(73,114,138,1)"
x: 0

layerB = new Layer
backgroundColor: "rgba(91,144,175,1)"
x: 200

layerC = new Layer
backgroundColor: "rgba(73,114,138,1)"
x: 400

layerD = new Layer
backgroundColor: "rgba(91,144,175,1)"
x: 600

layerE = new Layer
backgroundColor: "rgba(73,114,138,1)"
x: 800

layerF = new Layer
backgroundColor: "rgba(91,144,175,1)"
x: 1000

layerG = new Layer
backgroundColor: "rgba(73,114,138,1)"
x: 1200

layerH = new Layer
backgroundColor: "rgba(91,144,175,1)"
x: 1400

layerI = new Layer
backgroundColor: "rgba(73,114,138,1)"
x: 1600

pager = new PageComponent
width: 1024
height: 200
scrollVertical: false

pager.addPage layerA
pager.addPage layerB
pager.addPage layerC
pager.addPage layerD
pager.addPage layerE
pager.addPage layerF
pager.addPage layerG
pager.addPage layerH
pager.addPage layerI

pager.animationOptions = curve: "spring"

next.on Events.Click, ->
print "Clicked!"

forward.on Events.Click, ->
print "Clicked!"

Michał Maciejewski

It's working, but can I make it looping?

Paul Justin Farino

Michał Maciejewski - You can make it looping. I created a simple example ->
Depending on the way you order stuff you may want to change things around.

Michał Maciejewski

Your example it's not looping Paul Justin Farino. I want to see first page after the last one.

James Alegria

I would highly recommend against using carousels. People just don't engage with them.

Michał Maciejewski

James Alegria thanks for your replay but i realy need to do this :/

Jonas Treub

Here is a quick example. The code is commented:

Michał Maciejewski

Great!! Thank You Jonas Treub. A can't add to this buttons next and prev :/

Koen Bok

*Jonas drops mic*

Michał Maciejewski

So many hours spend on this and still not working. It's still not looping

Also i want my first state of carousel to look like this

Thank u in advance

Read the entire post on Facebook