Streaming live at 10am (PST)

Slide number with total number of slides

Hey guys, I need a little help with how to add numbered pagination to a slider in webflow. Thanks

1 Like

Only by custom code. Should be very simple. You want js solution?

Also you want to use one slide per view? (Y/N)

Yes the JS solution please :slight_smile:
One slide per view (yes)

@Siton_Systems you there :eyes:

Very tricky solution (Because “no way” to know if the slider change).

I find an idea - track the change of .w-slide “style” (Each slide change inline-style by code) - like this the counter will work on fade, auto, swipe, arrows an so on.

style="transform: translateX(-1730px); opacity: 1; transition: transform 500ms ease 0s;"`

attrchange is a simple jQuery plugin to bind a listener function on attribute change of an element. The handler function is triggered when an attribute is added, removed or modified to the element.

https://github.com/meetselva/attrchange

How to

webflow tree

  1. Add text element write 1 and the id of counter

  2. Add text element write total - add the id of totalSlides
    image

styles

Add any design/styles/colors for 1 & 2 (The content inside will change by code) (**set to display to inline-block to get this “layout” 1 of 20)

Custom code side:

Copy-paste before body

<!-- ## slider counter 1 of total ## -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>
<script>
  $(document).ready(function() {
    /* 1.2. get the number of slides */
    var numItems = $(".w-slider-dot").length;
    document.getElementById("totalSlides").innerHTML = numItems;
    /* set the index value before slide changed */
    var myIndex = $(".w-slider-dot.w-active").index();
    var counter =  document.getElementById("counter")
    counter.innerHTML = myIndex + 1;

    /* 2.2. change the index dynamically */
    $(".w-slide").attrchange({
      trackValues: true,
      callback: function(event) {
        myIndex = $(".w-slider-dot.w-active").index();
        counter.innerHTML = myIndex + 1;
      }
    });
  });
</script>

Publish :slight_smile: ==> Works like magic :slight_smile:

Notes:

  • One per page - Solution for one slider per page (I could solve more complex ideas. But lets start her hh)…
  • -or issue- If you have two sliders but only one with “number counter” - add #id for the slider and scope the selector:
var numItems = $("#slider1 .w-slider-dot").length;
//....
$("#slider1 .w-slide").attrchange({
//...rest of the code
  • Total slides flicker - If the slider is above-fold - You get very short “flicker” (Until the code load and change the “total” value). Solution ==> add fade animation on load - or - use empty space for total (Harder to style)
6 Likes

@Siton_Systems Thank you so much!

1 Like

Thank you for the solution! I was trying to achieve just that.

Is there anyway to make the numbering start from 0 (01, 02, 03, etc.)?

Really appreciate your help. :slight_smile:

Small code change - Example for counter:

document.getElementById("counter").innerHTML = (myIndex < 9 ? '0' : '') + (myIndex +1) ;

Index 0 (First slide on webflow) —> return (01)
index 8—> (return (09)
Index 9—> (Return 10)

Using Conditional (Ternary) Operator ((condition) ? <if true> : <if false>;)`

01 of 05

Same steps as above - only with two small code changes (For index and total slides).

important: (For non-JS users - Do not copy this code and the code block from the original answer :slight_smile: Choose one format -or).

Copy paste before body

<!-- ## slider counter ## -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>
<script>
  $(document).ready(function() {
    /* 1. get the number of slides */
    var numItems = $(".w-slider-dot").length;
    /* format total slides like this: 05...09...10....12"*/
    document.getElementById("totalSlides").innerHTML = (numItems < 9 ? '0' : '') + (numItems);
    var myIndex = $(".w-slider-dot.w-active").index();
    /* format index like this: 05...09...10....12"*/
    document.getElementById("counter").innerHTML = (myIndex < 9 ? '0' : '') + (myIndex +1)

    /* 2. change the index dynamically */
    $(".w-slide").attrchange({
      trackValues: true,
      callback: function(event) {
        myIndex = $(".w-slider-dot.w-active").index();
        /* format index like this: 05...09...10....12"*/
        document.getElementById("counter").innerHTML =  (myIndex < 9 ? '0' : '') + (myIndex +1)
      }
    });
  });
</script>

Output:

01 format code idea:

1 Like

You are a star, Ezra! Works like charm!

1 Like

Hi,

Thank you for this script. It works really well, but I was wondering if it’s possible to create one for a CMS slider? I have a collection list on 1 page with portfolio projects and each item is a slider.
So I would like a counter under each slider. Might this be possible?

Thanks in advance!

Thanks for your help. Worked like a charm, with some minor fixes. I had some problems with your code. The numbers are only set with 2 digits till 8. I don’t no why exactly but i the total amount was always 0, so I instead counted the class “.w-slide”.
This is my version of your code snipped, hope it helps some people – having the same troubles:

<!-- ## slider counter ## -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>
<script>
  $(document).ready(function() {
/* 1. get the number of slides */
var numItems = $(".w-slide").length;
/* format total slides like this: 05...09...10....12"*/
document.getElementById("totalSlides").innerHTML = (numItems < 10 ? '0' : '') + (numItems);
var myIndex = $(".w-slider-dot.w-active").index();
/* format index like this: 05...09...10....12"*/
document.getElementById("counter").innerHTML = (myIndex < 10 ? '0' : '') + (myIndex +1)

/* 2. change the index dynamically */
$(".w-slide").attrchange({
  trackValues: true,
  callback: function(event) {
    myIndex = $(".w-slider-dot.w-active").index();
    /* format index like this: 05...09...10....12"*/
    document.getElementById("counter").innerHTML =  (myIndex < 10 ? '0' : '') + (myIndex +1)
  }
});
  });
</script>

Hi @Siton_Systems !
Do you think your script could be adapt for multiple sliders per page ?
Your current solution works perfectly for the first slider, but not for the following ones which are on the same page …
Thank you for your help !
Romain

1 Like

Hey please please please can we get some help for multiple sliders on one page @Siton_Systems - I’ve got a client waiting on this… A good example of what I’m trying to achieve is: http://www.mrpstudios.com/ click on ‘Architecture’ to reveal the multiple sliders.

Thanks a million,

B.

Any help on this would be greatly appreciated.

@Siton_Systems when you’ve got some time, do you mind please helping find a solution for more than one slider per page… Thanks.