Progress bar layer - dynamically change the value
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');
- "to" value between 0 and 1
- 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');
Parameters
- "from" value between 0 and 1
- "to" value between 0 and 1
- easing
Example
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.
Code
if(!this.isAdmin){ 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)); this.sliderElement.on('mainAnimationStart', $.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> |
Result