help creating slider component with centered variable width slides

[leafer_design]

What are you trying to do?
I’m trying to use the built-in Plasmic slider component and am a little stumped on how to achieve a certain effect:

• The active/selected slide is wider than the other slides and centered on screen
• Changing to the next slide/making the next slide active is smooth, and is centered on screen
• It’s easy to switch/skip certain slides (jump from slide 1 to slide 3, for example)

What have you tried so far? (please link relevant docs and other forum posts)

• I’ve built a working prototype that makes use of a component with a big (wide) and lil (narrow) state
• The slider starts with the active slide centered
  
  

However…

1. Switching slides becomes “un-centered” as the new active slide expands
2. Swiping only seems to move 1 slide at a time rather than making the newest centered slide active
   
   

Playground project:

• Project

[alex_noel]

@leafer_design smth like this?

Plasmic

You can copy the whole thing and insert into your project.
just make sure to add transform for smooth width transition, and onClick interaction on slide to switch the currentSlide state variable if you want to navigate that way

[leafer_design]

1. Well I was hoping to use swipe, rather than click only, and it seems your example still has the “un-centered” issue when swiping
   but thanks for the example, didn’t think about using the html attribute to style them!

2. Also, I figured out that “Swipe to Slide” was the setting for the jumping between slides instead of switching one at a time