Slide number with total number of slides

Design help General
22

thanks for the comment! here’s the live link. it just doesnt work for me: https://slider-16c12f.webflow.io/

23

Thank you so much for this, it works like a charm! Many thanks and :blue_heart:!

EDIT: I’m having a small issue when implementing the double digit code. I happen to have 9 slides and it shows as 10 (it actually ends on 09/10). Any idea?
Let me add that I am feeding the slider with dynamic content by means of another script shared by finsweet.

24

Hello, i have problems with solution implementation in to website, counter does not work at all. Can someone provide more detailed tutorial on how to make multiple sliders in one page work ?

Thank you!

25

Been searching for this! Thanks so much!!! <3

If at one point you’ll find time to try adding this function to the courser on hover over the slider (as seen here: https://sometimes-always.com/ ) Would be awesome!

26

Nice effect. This is custom code (Show X on Hover and change the data - Sorry it is not related specific to sliders (No “short” solution for idea like this).

Custom text cursor:

27

Hey man, thanks for this. Like someone else has said, the total_slides is working perfectly, but the counter is not counting up - just sticking at 1. Would really appreciate any help from anyone? I’ve done every step and nothing has an ID. Should there be an ID somewhere as the script references finding #counter?

1 Like
28

I’ve updated the code that the person above supplied to work for any number of Sliders without having to use specific classes or IDs on sliders.

Basically changing the attrchange to look for the change for every w-slide within their respective Slider. Hence the $(this).find(“.w-slide”).attrchange instead of just w-slide attrchange which will only work in one instance. And changing the counter to be found within the wslider as a child, within (this) meaning the w-slider. Thats why the Total number worked before but not the counter.


	/* Sep 2020 - Get index of total webflow slider - Develope by Ezra Siton - Israel */
  $(document).ready(function() {
    /* TOTAL SLIDES - important - slider element name is w-slider (not w-slide) */
    $(".w-slider").each(function(){
      /* 1.2. Get the total number of slides */
      var numItems = $(this).find(".w-slider-dot").length;
      $(this).find(".total").html(numItems);
      /* set the index value before slide changed */
      var myIndex =  $(this).find(".w-slider-dot.w-active").index();
      var counter =  $(this).find(".counter");
      counter.innerHTML = myIndex + 1;     
      /* 2.2. Change SLIDE Index */ 
      $(this).find(".w-slide").attrchange({
        trackValues: true,
        callback: function(event) {
          var slider_id = event.target.parentElement.id;
          /* change counter by jquery html() "; */
          myIndex = $("#" + slider_id).siblings(".w-slider-nav")
            .find(".w-slider-dot.w-active").index();
          $("#" + slider_id).siblings(".counter_wrap").find(".counter").html(myIndex + 1); 
        }
      });
      
    });/* end each */
  });/* end on ready */
1 Like
29

Just tried all these versions and checked the custom code with the css I used, but no luck. Did they update something with the webflow slider that prohibits this from working?

30

I’m having some trouble with this as well. I ended up using @simmens modified code (single slider on page). I got it to work, and it works great on staging site, but only half of the time? You can refresh the page and there’s no pattern to whether it will work or not. It will display 01/05 every time, but when you try to change slides, sometimes it will always stick at 01. It sucks because I know its working, but I have no idea why it is only half of the time. I’d appreciate any help on this!
Staging Site: Explore Courses
Read Only: https://preview.webflow.com/preview/coursello?utm_medium=preview_link&utm_source=dashboard&utm_content=coursello&preview=bfde32ef967943d09044d109ca0de564&workflow=preview

31

Hey @Siton_Systems,

Thanks for the original code.

I am using the counter on the actual slides, however it only seems to work on the first one.

Any tips to make it work on the others?

Thanks!

EDIT:

I tried the method in post #16 also. This changes the total number but the counter just stays at 1.

32

Hi. Add read only link.

Check again the site tree:

image

33

Thank you for the code! Is there any way to make this slider counter work with a CMS driven slider using Finsweet CMS Slider?