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!

Leave a Reply

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