Streaming live at 10am (PST)

Add DOM Events for the slider


#1

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


#2

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.


#3

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


#4

This is very clever! Thank you for sharing.. clap


#5

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


#6

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


#7

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.


#8

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


#9

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.


#10

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.


#11

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);

#12