带有进度条的 Flex 滑块？答案

【问题标题】：Flex Slider with progress bar?带有进度条的 Flex 滑块？
【发布时间】：2013-02-05 20:33:10
【问题描述】：

如何在我已有的 flex-slider jQuery 中添加进度条。

代码： http://codepen.io/aidenguinnip/pen/wrgqh

我想将深灰色线设置为与滑块交互的进度条。

【问题讨论】：

我忘了提及我希望它如何交互。我希望它更像是一个计时器/倒计时。我希望它在图像在那里的 5 秒内从 0% 变为 100%，然后当它滑到不同的图像时重新启动。当您单击“下一个”或“上一个”时，我需要它进行交互。

标签： jquery progress-bar flexslider

【解决方案1】：

使用这个 css 元素：

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

基本上，您将收集当前滑块中的图片总数并将该数字除以 100。现在，每次滑块更改图片时，您都需要将 css width of .progress_bar 更改为 % 中的此数量

示例 -- 你有十张图片

每滑动一次图片宽度增加10%

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

【讨论】：

抱歉，我忘了说我希望它如何交互。我希望它更像是一个计时器/倒计时。我希望它在图像在那里的 5 秒内从 0% 变为 100%，然后当它滑到不同的图像时重新启动。当您单击“下一个”或“上一个”时，我需要它进行交互。
@aidenguinnip 不是你的另一个问题HERE 所做的吗？
是的，但我不知道如何将它与 FlexSlider jQuery 结合。（P.S. 我还在学习 javascript 和 jQuery）
好的，我再看看，给我一点时间

【解决方案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;
}

$('.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");
});

希望这会有所帮助！

【讨论】：