Progress bar layer - dynamically change the value

The following codes are available from version 3.2.13!

You can use this JavaScript code to dynamically change the value of the progress bar based on its current value.

n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').to(0.5, 'linear');
  1. "to" value between 0 and 1
  2. easing

You can use a code like this to adjust the start value as well:

n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').fromTo(0.5, 1, 'linear');


  1. "from" value between 0 and 1
  2. "to" value between 0 and 1
  3. easing


A progress bar used as a counter for the slides. You'll need to place the code to the Slider Settings → Developer tab → JavaScript callbacks field of your slider.

this.ready($.proxy(function() {
        n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').to((this.currentRealSlide.index+1)/this.slides.length, 'linear');
    }, this));
    $.proxy(function(e, animation, previousSlideIndex, currentSlideIndex) {
        if(previousSlideIndex == this.slides.length-1 && currentSlideIndex == 0){
            n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').fromTo(currentSlideIndex, (currentSlideIndex+1)/this.slides.length, 'linear');
        } else {
            n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').to((currentSlideIndex+1)/this.slides.length, 'linear');
        n2('.n2-ss-static-slide .n2-ss-item-progressbar-label .count').text(currentSlideIndex+1);
        n2('.n2-ss-static-slide .n2-ss-item-progressbar-label .all').text(this.slides.length);
    }, this));
Progress bar setup
Parameter Value
Value 0
Start from 0
Total 100
Label Slide <span class="count">1</span> of <span class="overall">4</span>