Add DOM Events for the slider

Hi there!

It would be nice if the WebFlow slider could trigger some DOM Events such INITIALIZING, BEFORE_SLIDE, SLIDING_LEFT, SLIDING_RIGHT, AFTER_SLIDE. Actually, It’s really easy to implement this code and brings a new world of opportunities to developers to improve their website using the WebFlow API.

Thanks in advance,
Pablo

1 Like

Thanks Pablo!

We have some ideas up our sleeve to bring more power to developers in this type of way :wink:

It will take some time and proper documentation, but we agree… it could be very powerful.

Thanks for your reply danro.

Btw, we are using a custom slider controller to “improve” the slider events interactions. It could be useful for someone else, here is the link so you can take a look to the code: https://gist.github.com/uiman/7e28a4ed424bda6592eb

Cheers

1 Like

This is very clever! Thank you for sharing… :clap:

It will be nice to see this in a real life example and how it works.

Your Github link is broken, can you kindly relink. Thanks.

There you go: https://gist.github.com/uimanwashere/2708a263e75403f28b0a

I’m not sure if this is still compatible, but it should work or at least you could replicate the idea. Btw the code is commented with a basic example of how to use it.

Thanks I will look at it. Any site or playground you can share where it was used will be appreciated.

Hi, my account/plan is not allowed to access the Custom Code settings, so I cannot test if this is even compatible. But, you could try this:

  1. Start a new blank template

  2. Insert an slider with ID: “custom-slider”.

  3. Then go to Site Settings -> Custom Code -> Footer Code

  4. Paste gist code between <script> tags

  5. Paste this at the end

    var slider = new W_SLIDER_CONTROLLER('#custom-slider');
     document.addEventListener("keypress", function(){
        slider.next();
     });
  6. Save settings

Now every key on your keyboard should move the slider to the next item.

That is awesome. I will check it. Can you also share how to add event listener to target specific slides in the same page. Like jumping/sliding to a specific slide on the same page and slides in other page with your approach.

Just create a new W_SLIDER_CONTROLLER instance for each slider ID you want to control and save a reference to each one. Then you will be able to call specific methods like next() or goto(i) for each slider.

var sliderA = new W_SLIDER_CONTROLLER("#main-slider"),
sliderB = new W_SLIDER_CONTROLLER("#inner-slider");

sliderA.next();
sliderB.goto(2);