Progress Bar Slots Example

Convert the normal progress bar using the Slider's API as well as custom CSS/JS to work with slots.


Download the example slider!

Step 1:

From the slider’s main settings page, activate the regular Progress Bar.

Step 2:

Add the following code to the slider’s Custom CSS section, adjusting the colors to fit your styling needs.

/* progress bar slot */
.rev-progress-perc {
    
    /* default background color */
    background-color: rgba(255, 255, 255, 0.25);
  
    display: inline-block;
    height: 15px;
    position: absolute;
    bottom: 0;
    z-index: 99;
    
}

/* progress bar slot activated */
.rev-progress-perc.is-active:before {
    
    /* set this to the same color as the progress bar */
    background-color: rgba(0, 0, 0, 0.5);
  
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    content: "";
  
}

/* progress bar slot divider line */ 
.rev-progress-perc:after {
    
    /* the divider line color */
    background-color: rgba(255, 255, 255, 0.5);
  
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
	height: 100%;
    content: "";
    z-index: 201;
  
}

.rev-progress-perc:not(.running) {cursor: pointer}
.rev-progress-perc:last-child:after {width: 0}
rs-progress.hide {background: transparent !important}

Step 3:

Add the following code to the slider’s Custom JavaScript section, adjusting the “revapi1” number with your slider’s ID

/* 
  change "revapi405" part below to your slider's ID:
  http://sharedimages.themepunch.tools/rev_slider_id.png
*/

var api = revapi405;

/*
  no need to edit below
*/

var swapAdded,
	slideIndex,
	progressBar,
    supressChange,
    progressSlots = [];

function addActive(i) {

    if(i < slideIndex) this.className = 'rev-progress-perc is-active';

}

function changeSlides() {

    if(this.className.search('running') !== -1) return;
                      
    supressChange = true;
	progressBar.addClass('hide');
	
    slideIndex = parseInt(this.getAttribute('data-slide'), 10);
	api.revshowslide(slideIndex + 1);

    progressSlots.removeClass('is-active');
    progressSlots.each(addActive);           

}

function onSwap(e, data) {

	if(!supressChange) progressSlots.eq(api.revcurrentslide() - 1).addClass('is-active');  
	else supressChange = false;                          

}

api.on('revolution.slide.onloaded', function() {

    var totalSlides = api.revmaxslide(),
        perc = parseFloat((100 / totalSlides).toFixed(2));

    for(var i = 0; i < totalSlides; i++) {
    
        progressSlots[i] = jQuery('<span class="rev-progress-perc" style="width: ' + perc + '%; left: ' + (perc * i) + '%" data-slide="' + i + '" />');
                                   
    }
                                   
    api.append(progressSlots);
    progressBar = jQuery('rs-progress');
    progressSlots = jQuery('.rev-progress-perc').on('click', changeSlides);
                                   
}).on('revolution.slide.onchange', function(e, data) {
    
    var currentSlide = data.slideIndex - 1;                              
    jQuery('.rev-progress-perc.running').removeClass('running');
    progressBar.removeClass('hide').appendTo(progressSlots.eq(currentSlide).addClass('running'));  
	
    if(currentSlide === 0) progressSlots.removeClass('is-active');                            
    if(!swapAdded) {
	
		api.on('revolution.slide.onbeforeswap', onSwap);
		swapAdded = true;
		
	}

});
Progress Bar Slots Example

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!

2 thoughts on “Progress Bar Slots Example

  1. Hello, thank you for this example KC.
    Im trying to achieve something similar on client’s website but I’m encountering an issue with progress bar. Everytime when one slide ends and next one starts, the progress bar resets itself for like a half second on old position. This is happening also on default slider using your code from example above.
    Can you pls help me to understand why is this issue happening?

    Thank you!

    1. Hi Silvester,

      Thanks for your message. Achieving the same effect no longer requires custom CSS/JS. We have now integrated this feature in “Navigation Option” > “Progress Bar”. All you have to do would be to use the “Module Progress” option and apply “Gap” > “Gap Size” > “2” to the “Progress Bar”. Then change the “Background” color of the “Progress Bar”. If you require further guidance, you can open a support ticket at https://support.sliderrevolution.com/ or drop us an email at [email protected] and a member of our team will attend to you asap!

      Thanks!
      KC
      ThemePunch

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.