Progress Bar Slots Example

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;
		
	}

});