Comment ajouter une barre de progression dans le curseur jssor (comme dans le curseur de révolution)?

Question

Bonjour, Je construis un curseur sur mon site en utilisant Jssor Slider (avec jQuery).

J'ai vu une barre de progression (barre de temporisation) sur le curseur de révolution. exemple ici - http://htmlstream.com/preview/unify-v1.5/page_home2.html

Merci

Answer 1

S'il vous plaît suivre les 2 étapes suivantes,

1. Ajouter un élément statique conteneur 'diapositives comme élément de progression.

   <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. progrès de mise à jour en $ JssorSlider $. Événement se déclenche EVT_PROGRESS_CHANGE $.

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

Référence: Slider with Progress Bar Example