fullpage.js - 自動再生がオンのときにスライドの進行状況バーを作成する方法

Question

私はfullpage.jsを使用していて、基本設定をOKにしています。私は、ユーザーがより多くのがあります知っているので、自動スライドショーモードにするときタイマープログレスバーを追加したいautoslide機能に

afterRender: function() { 
    idInterval = setInterval(function() { 
    $.fn.fullpage.moveSlideRight(); 
    }, 2000); 

を使用しています。

私はcodepenを持っており、プログレスバーのフルページの例と作業コードを持っています。 https://codepen.io/anon/pen/OXWPje

スライドごとにプログレスバーを組み込む方法はありますか？

おかげ

Answer 1

ので、私はこれを理解できた最善の方法はJavaScriptで設定されたタイマと一致したスライドの内側にループしたプログレスバーを作成するために、外部のCCSのアニメーションを使用することです。

私は感謝

https://codepen.io/sriramsitaraman/pen/zBNmgX

.anim9 { 
    margin: 0 auto 2em auto; 
    width: 600px; 
    height: 2px; 
    background: -webkit-linear-gradient(left, #f00, #f00 10%, #000 10%); 
    background: linear-gradient(to right, #f00, #f00 10%, #000 10%); 
    -webkit-animation: anim9 6s linear infinite; 
      animation: anim9 6s linear infinite; 
} 
@-webkit-keyframes anim9 { 
    to { 
    background-position: 600px 0; 
    } 
} 
@keyframes anim9 { 
    to { 
    background-position: 600px 0; 
    } 
} 

からロードするコードを選んだ https://codepen.io/anon/pen/aZpReg

のようなもの