Flex Slider с индикатором выполнения?

Question

Как бы я добавил индикатор прогресса в jQuery flex-слайдера, который у меня уже есть.

КОД: 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 для изменения индикатора выполнения. Это означает, что наше время перехода CSS (4,7 с) должно быть SlideshowSpeed ​​(5 с) минус animationSpeed ​​(0,3 с).

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

Надеюсь это поможет!