Streaming live at 10am (PST)

Move interaction on each click


#1

Hi.

I’m trying to create custom slider (last section at bottom of homepage). (Built in slider is not an option, because I can’t style it with css calc function)

On button R click I added an interaction that moves slider div element.
On first click interaction works fine.
When user clicks R more than once div doesn’t move.

How can I achieve slider movement on other clicks?

Another question: is it possible to limit move interaction so slider would stop after N clicks?

Any help is appreciated.


Here is my public share link: https://preview.webflow.com/preview/coolemur?utm_source=coolemur&preview=9c649f832349387e23e9dd208c55f0e4

Here is site’s published link: https://coolemur.webflow.io


#2

Hi Mantas and welcome on the forum!

Are you sure? Just in case of, series of facts:

  1. you can use the custom code element within the page to make any css custom code active within the Designer, so you see the effects right there, no need to publish
  2. you can set CSS calc rules in CSS custom code in the page, targetting the various classes you can add to various element of the stock Slider element.

Before trying to answer your rela issue, can you give me feedback on this and explain to me what’s the calc rule you’re after?


#3

I had the same approach in mind. To use custom css calc. We would use it for aligning outer elements with slider component.

But with built in slider there are more restrictions, like you can’t move arrows outside slider container to align them by our design.

The design has to look like in provided links - arrows are aligned with container above slider at right side. Heading is aligned with container above slider at left side. Going trough responsive breakpoints alignment must remain.

Currently we are testing out Webflow. We don’t have paid plan for tests yet. So I can’t use custom css to create an example slider.

Even if this could solve the main problem, “for each click(action) do interaction” functionality is one of commons in our projects.