CODEWITHSUNDEEP
jquerysliderprogress-barjssor
rinuk
rinuk

Reputation: 13

How to add a progress bar in jssor slider (just like the one in revolution slider)?

Hi I am building a slider on my site using Jssor Slider (with jQuery).

I have seen a progress bar (timer bar) on revolution slider. example here - http://htmlstream.com/preview/unify-v1.5/page_home2.html

Thanks

Upvotes: 1

Views: 804

Answers (1)

jssor
jssor

Reputation: 6985

Please follow the following 2 steps,

  1. Add static element to 'slides' container as progress element.

    <div u="slides" ...>
    ... 
    <div id="progress-element" u="progress" style="position: absolute; left: 0; bottom: 0; width: 0%; height: 5px; background-color: rgba(255,255,255,0.5); z-index: 100;"></div>
</div>

  2. Update progress while $JssorSlider$.$EVT_PROGRESS_CHANGE event fires.

        var progressElement = document.getElementById("progress-element");

    function UpdateProgress(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
        if (progressEnd > 0) {
            var progressPercent = progress / progressEnd * 100 + "%";
            progressElement.style.width = progressPercent;
        }
    }

    jssor_slider1.$On($JssorSlider$.$EVT_PROGRESS_CHANGE, UpdateProgress);

Reference: Slider with Progress Bar Example

Upvotes: 1

Related Questions