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

Hi!
I'm very beginner in framer and i wanted to ask is it possible to make loop carousel like this one http://kenwheeler.github.io/slick/ (Myltiple items example) in framer?

How can i do that?

Here is my wireframe:
http://i.imgur.com/5AvxczM.png

12 Comments

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

#layers
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

#pagercomponent
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!"
pager.snapToNextPage()

forward.on Events.Click, ->
print "Clicked!"
pager.snapToPreviousPage()

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 -> http://share.framerjs.com/9s27u2g34ycm/
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: http://share.framerjs.com/4u6qpp9dcpvm/

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

http://share.framerjs.com/r1ku28citowo/

Also i want my first state of carousel to look like this
http://i.imgur.com/5AvxczM.png

Thank u in advance

Read the entire post on Facebook