Slide number with total number of slides

Design help General
17

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

More than one slider on a page (No need to add any id/class to each slider)

site tree structure:

image

image

  1. div wrapper (Must be inside the slider // Must be inside the slider // Must be inside the slider) ==> named counter_wrapper

  2. Use class (not id) for the counter ==> named counter:

    image
    image1366×923 79.1 KB

  3. Use class (not id) for the total slides ==> named total_slides:

image
image1168×815 61.9 KB

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

image

attrchange event object
image

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(){

image

**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)
image

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

Add css transition
image

The code change the opacity:

image

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.

image

4 Likes