jquery - 带有进度条的 Flex 滑块？

Question

我如何向我已经拥有的 flex-slider 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%

这一切都可以通过自定义jQuery脚本来完成

Answer 2

有点晚了，但也许这可以帮助另一个搜索这种东西的人。

下面的代码为每张幻灯片创建一个可点击的进度条。因为我们需要 currentSlide 值，所以我们使用 flexsliders 'after' 函数来更改进度条。这意味着我们的 css 转换时间（4.7 秒）需要是幻灯片速度（5 秒）减去动画速度（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");
});

希望这可以帮助！