jquery - プログレスバー付きのFlex Slider?

Question

既に持っているフレックス スライダー jQuery にプログレス バーを追加するにはどうすればよいですか。

コード: http://codepen.io/aidenguinnip/pen/wrgqh

スライダーと相互作用する進行状況バーとして、濃い灰色の線をアニメーション化したいと思います。

Answer 1

この css 要素の操作:

.progress_bar { 
       background: #3F3C38;
       height: 4px; 
       width: 30%;
       position: relative;
}

基本的には、現在のスライダーの画像の合計量を収集し、その数を 100 に分割します。スライダーが画像を変更するたびに、css width of .progress_barこの量に変更する必要があります。%

例 -- 10 枚の写真があります

画像がスライドするたびに、幅の量を 10% ずつ増やします

これはすべて、カスタムjQueryスクリプトで実現できます。

Answer 2

やや遅いですが、これは、この種のものを検索する別の人を助けることができるかもしれません.

以下のコードは、スライドごとにクリック可能な進行状況バーを作成します。currentSlide 値が必要なため、flexsliders 'after' 関数を使用してプログレスバーを変更します。これは、css 遷移時間 (4.7 秒) が、slideshowSpeed (5 秒) から animationSpeed (0.3 秒) を引いたものである必要があることを意味します。

コードペン: http://codepen.io/anon/pen/doRzog

HTML:

<div class="slider">
  <ul class="slides">
    <li data-slide="0"><img src="http://placehold.it/250/333333/FFFFFFF" /></li>
    <li data-slide="1"><img src="http://placehold.it/250/999999/000000" /></li>
    <li data-slide="2"><img src="http://placehold.it/250/CCCCCC/123456" /></li>
  </ul>
  <div class="slides-timer">
    <div class="slide-timer" data-slide="0">
      <div class="slide-progress">
        <div class="slide-progress-active"></div>
      </div>
      <div class="slide-name">First slide</div>
    </div>
    <div class="slide-timer" data-slide="1">
      <div class="slide-progress">
        <div class="slide-progress-active"></div>
      </div>
      <div class="slide-name">Second slide</div>
    </div>
    <div class="slide-timer" data-slide="2">
      <div class="slide-progress">
        <div class="slide-progress-active"></div>
      </div>
      <div class="slide-name">Third slide</div>
    </div>
  </div>
</div>

CSS

.slides-timer {
    position: absolute;
    bottom: 30px;
    left: 25%;
    width: 50%;
    text-align: center;
}

.slide-timer {
    float: left;
    margin: 0 1%;
    height: 25px;
    overflow: hidden;
    cursor: pointer;
}

.slide-progress {
    background-color: #c1c1c1;
    height: 1px;
    width: 100%;
}

.slide-progress-active {
    background-color: #373737;
    width: 0%;
    height: 100%;
}

.working .slide-progress-active {
    background-color: #373737;
    width: 100%;
    -webkit-transition: width 4.7s linear;
    transition: width 4.7s linear;
}

JS

$('.slider').flexslider({
     controlNav: false,
     directionNav: false,
     pauseOnHover: false,
     pauseOnAction: false,
     start: function (slider) {
         changeTimer(slider);
     },
     after: function (slider) {
         changeTimer(slider);
     },
     slideshowSpeed: 5000,
     animationSpeed: 300
});

function changeTimer(slider) {
    $('.slide-timer').removeClass('working');
    $('.slide-timer[data-slide="' + slider.currentSlide + '"]').addClass('working');
}

$('.slide-timer').on('click', function () {
      $('.slider').flexslider(parseInt($(this).attr('data-slide')));
      $('.slider').flexslider("play");
});

お役に立てれば！