CODEWITHSUNDEEP
jqueryprogress-barflexslider
Aiden Guinnip
Aiden Guinnip

Reputation: 13

Flex Slider with progress bar?

How would I add a progress bar to the flex-slider jQuery I already have.

CODE: http://codepen.io/aidenguinnip/pen/wrgqh

I want to animate the dark gray line as a progress bar with that interacts with the slider.

Upvotes: 1

Views: 2956

Answers (2)

Arno
Arno

Reputation: 161

Somewhat late but maybe this can help another person who searches for this kind of thing.

The code beneath creates a clickable progress bar for each slide. Because we need the currentSlide value we use flexsliders 'after' function to change the progressbar. This means our css transition time (4.7s) needs to be the slideshowSpeed (5s) minus the 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");
});

Hope this helps!

Upvotes: 0

ROY Finley
ROY Finley

Reputation: 1416

Working with this css Element:

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

Basically you would collect the total amount of pictures in the current slider and divide that number into 100. Now each time the slider changes pictures you will need to change the css width of .progress_bar to this amount in %

Example -- You have ten picures

Each time a picture slides, increase the amount of width by 10%

This can all be accomplished with a custom jQuery script

Upvotes: 1

Related Questions