Create multi click button that scrolls images horizontally | New Interactions Panel

Design help Animations & Interactions
1

Good afternoon webflow community,

I have been trying to create a custom slideshow using the new interactions panel.

Concept outline

  • carousel style slider with infinite repeat
  • a centered image focal point where surrounding images on the carousel are smaller and 60% opacity
  • Focused image should be larger than the other images displayed on the left and right.

is there any way to achieve this with interactions? I can’t seem to create it using the slider component.

Is there a way to create a multi click button that scrolls the carousel? (left button/right button)

1 Like
2

Hi there,

While Webflow’s built-in slider element provides basic slide navigation and customization options, creating a carousel with varying image sizes, opacity changes, and infinite repeat would require additional customization. Here are some approaches you could consider:

You can enhance the basic slider functionality using custom code in your page settings. This could involve JavaScript for the infinite loop feature and CSS animations for opacity transitions. Alternatively, you could integrate a third-party carousel library like Swiper.js or Splide.js through a custom code embed.

For a code-free solution, you can create a similar effect by combining multiple sliders with creative use of transforms, transitions, and opacity settings in the Style panel.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thanks for the reply!

I’ll have to get some coding experience to pull this one off. However I thought of a solution using multiple “clickable” buttons (thick lines) almost like a tab setup instead of using a left and right buttons to navigate the slider.

My problem now is i can only click each button once, after that it won’t continue to shift back and forth through the carousel accordingly. They just stop working.

Click Trigger Settings

  • I’m using the new animations with GSAP
  • I’ve made sure my trigger on each button is set to “each click” meaning click as much as you wish and it should play the animation from where ever point the carousel is at.
  • I have it set as “play” animation when clicked. Does it need to be on “resume”?

Animation Settings

I’m animating an image wrapper to slide back and forth through depending on which button you press. (like a tab section)

  • I have no starting position only animating “to” in increments of 0% | 20% | 40% etc. depending on the button.

Animation Setup

I have 5 images on a track and 5 line buttons below

I select each button and add a click animation to it. Within each click animation I select the “image track” and shift it do display the relevant image.

So each button has it’s own click trigger which shifts the image-track

Any help with this would be greatly appreciated! I hope this makes sense.