Question

如何向我已经拥有的flex-slider jQuery添加进度条。

CODE： 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＆＃39;之后＆＃39;用于更改进度条的功能。这意味着我们的css过渡时间（4.7s）需要是slideshowSpeed（5s）减去animationSpeed（0.3s）。

CODEPEN：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");
});

希望这有帮助！

Flex Slider带进度条？

2 个答案: