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

What is Framer? Join the Community
Return to index
Vicky Yang
Posted Oct 19 - Read on Facebook

Hi guys,
I'm trying to make a simple thumbnail carousel with click to preview function.
Still working on fixing the buggy hover state. But have no idea on how to make the preview when click on thumbnail bit work.Eg. Click on green, green appears in preview, click on red, red appears in preview. ColourBlock1 in LargePreview = the same colour as colourBlock1 in ColourCarousel and so forth.
Here is my file:
http://share.framerjs.com/kxe9y1ecst0r/
Really appreciate any help or tips!

7 Comments

Andrew Nalband

Hi Vicky - I'd set the opacity of your colourBlock layers - sketch.colourBlock1.opacity = 0. Framer will import your settings from sketch if you hide the color blocks. To make it easier I'd give your colourBlocks more meaningful names "redBlock" and "greenBlock" and then when you click on the red layer, sketch.redBlock.opacity = 1 - and you can loop through the other layers and set their opacity to zero

Andrew Nalband

Does that make sense? Let me know if you have any questions and I can help you with how to implement it

Vicky Yang

Hi Andrew! Thanks for the info! I've tried it out and now I'm having trouble getting the click event to work when clicking on different colours. Sorry still trying to learn to code.
Here is the updated version:
http://share.framerjs.com/r8dhapz9wbg1/

And I'm sure there are ways to loop these!

Andrew Nalband

Hey Vicky Yang here's a functioning version...http://share.framerjs.com/foip2d7hnfr8/

Andrew Nalband

As I was making it, it occurred to me that there's a much better way to do this if you structure your sketch file differently. If you want to send me a link to your Sketch file, I'll show you how to do it

Andrew Nalband

Here you go - Vicky Yang - see how we've massively reduced the amount of code written? http://share.framerjs.com/ktqdowd6n6lm/

Vicky Yang

Thank you so much Andrew! I would've never thought it can be simplified through sketch layers!

Read the entire post on Facebook