How to listen to slide change on webflow slider

Hi There!
This is my 1st post on the webflow community. Hope I’m posting in the correct category… :sweat_smile:

I’m using the webflow slider for a page on my website.
I want the number of the Next and Previous slide to show above the Left and Right Navigation arrows of the slider.

Something like this:
navi

I figured I could just get the current slide index and update the button numbers from that. to do that I tried using the library below to listen to the slide change but its not working on Auto-play

Is there a better way to listen to the slide change? or perhaps some advice on how I can Update the script or even approach it in a different way?

Thanking you all In advance :heart:

Unfortunately I cant share this link right now.

1 Like

Hi @Devanjana_Peiris :wave:
For “listening” all what you want just use this slider👇

The Sygnal Attributes lib makes it easy to capture slide-change events and do whatever you want, including auto-nav change events;

demo here-

https://webflow-smart-elements.webflow.io/slider

Hi @bro-design,
Thank you for this but I’m trying to do this on the webflow slider itself.
Any Ideas for that… The script I was using stopped working as well :man_facepalming:

Hi @memetican ,
Thank you for the reply, where is the library in here ?

Found a solution using a lib, if anyone ever needs it…

<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>
<script>


  $(document).ready(function() {
  
    $(".w-slide").attrchange({
      trackValues: true,
      callback: function(event) {
        
      console.log("slide has changed")
      
      }
    });
  });
</script>
1 Like

Everything was on the page, setup instructions at the bottom.
Looks like you found a good jquery-based solution for the change detection though, nice work.

1 Like