Slide number with total number of slides

Tumusiime_Rayan · May 27, 2019, 8:13pm

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

Siton_Systems · May 27, 2019, 9:57pm

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

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

Tumusiime_Rayan · May 28, 2019, 4:46am

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

Tumusiime_Rayan · June 3, 2019, 2:52pm

@Siton_Systems you there

Siton_Systems · June 4, 2019, 12:06am

Update sep 2020

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

To avoid duplicate versions of code - see answer 17 in this thread:

https://discourse.webflow.com/t/slide-number-with-total-number-of-slides/87083/17

Tumusiime_Rayan · June 4, 2019, 8:13am

@Siton_Systems Thank you so much!

vmsdesigns · February 19, 2020, 7:19am

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.

Siton_Systems · February 19, 2020, 5:27pm

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 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:

dram · March 14, 2020, 9:34pm

You are a star, Ezra! Works like charm!

Kilian · May 14, 2020, 5:37pm

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!

simmens · August 21, 2020, 10:13am

Siton_Systems:

<!-- ## 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>

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>

romainsillon · August 21, 2020, 6:41pm

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

byron.robertson.info · September 8, 2020, 2:52am

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.

byron.robertson.info · September 8, 2020, 11:47pm

Any help on this would be greatly appreciated.

byron.robertson.info · September 18, 2020, 12:05am

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

Siton_Systems · September 30, 2020, 12:59pm

DEMO : https://siton-systems.webflow.io/show-number-of-slides

Copy - Paste Code

*** this code instead of the code above (Not And).

Very tricky solution again (I use attrchange event object to find the unique id (Generate by webflow) of each slide changed and traverse the DOM by this find(), siblings()

attrchange event object

Copy Paste

<!-- ## slider counter ## -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>

<script>
  /* 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(){
      console.log("w-slider");
      /* 1.2. Get the total number of slides */
      var numItems = $(this).find(".w-slider-dot").length;
      $(this).find(".total_slides").html(numItems);
      /* set the index value before slide changed */
      var myIndex =  $(this).find(".w-slider-dot.w-active").index();
      var counter =  $(".w-slider").find("#counter");
      counter.innerHTML = myIndex + 1;     

      /* 2.2. Change SLIDE Index */ 
      $(".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_wrapper").find(".counter").html(myIndex + 1); 
        }
      });

      /* set counter to 1 on load */
      $(".w-slider").each(function(){
        $(this).find(".counter").html("1"); 
      });
      /* show counter after the code runs (loader idea) */
      $(".counter_wrapper").css("opacity", 1);

    });/* end each */
  });/* end on ready */
</script>

Use this counter only for specific sliders

Very simple.

Change this global selector (“select all sliders”)

$(".w-slider").each(function(){

To more specific selector like ("select all slider with my_slider class).

$(".w-slider.my_slider").each(function(){

**In general it is better to use data attributes in the code (Update the code and selectors if you want).

Loader issue

If the slider is above-fold - You get very short “flicker” (Until the code load and change the “total” value).

Short Solution ==> add fade animation on load - or - use empty space for total (Harder to style).

Option 2:
Add custom CSS (opacity 0 on load)

<style>
  .counter_wrapper{
    opacity: 0;
  }
</style>

Add css transition

The code change the opacity:

UI CSS small “jump” issue

The width of the counter div sometimes change (In 1± pixel) because “1” with less width than “8” or “9” - to solve this issue add min-width value related to your design.

byron.robertson.info · October 1, 2020, 1:20am

You’re an absolute superstar! Thank you so so much.

Gio · January 1, 2021, 4:08pm

Hi, that was amazing! I was serching for this solution, it works like a charm. Thank you so much!

JBence · May 22, 2021, 2:21pm

Doesnt seem to work for me when I try it with multiple sliders. I’m doing everything step-by-step, but still not working.

This is only a test project, however, you can see that the wrapper structure + the code is the same as described above: https://cutt.ly/0b79Ybq

The full number of slides is OK, however, the counter doesnt change when I change slides.

If anyone’s around, I could use some advice

Siton_Systems · May 22, 2021, 3:40pm

Hi. Please add live URL (No way to test custom code by read-only link).

Works fine. Check if by mistake your js is blocked (inspect code).

Topic		Replies	Views
Custom slide nav General	6	4390	February 9, 2022
Javascript Number Counter Custom code	22	22767	January 28, 2023
Slider with count General	22	6519	May 2, 2018
How to integrate Swiper.js 6(Slider/Carousel - mobile touch) & Webflow CMS Webflow Tips	58	33711	October 27, 2021
How to set slider pagination number for each slide? Custom code	7	1740	January 5, 2023