FlexSlider Progress Bar

[email protected]

by Ryan Brackett

HTML

<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<h1>Flexslider w/ Progress Bar</h1>
This is a simple progress bar for flexslider. You need a div, some css to style that div, and the JS that syncs it up to the slide transitions using the Callback API.
<br/>
<br/>
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
        </li>
        <li>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
        </li>
        <li>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
        </li>
    </ul>
    <div class="progress_bar"></div>
</div>

CSS

body {
    font-family: Arial;
    font-size: 13px;
    line-height: 20px;
}
.progress_bar {
    width: 0px;
    height: 10px;
    position: relative;
    background: black;
    z-index: 9;
    /*margin: auto;*/
    margin-top: -10px;
    opacity: .3;
}
.flexslider {
    overflow: visible!important;
}

JavaScript

/*
 * jQuery FlexSlider v2.0 // Extra code by Ryan Brackett & Jeremy Clements
 
 * http://www.woothemes.com/flexslider/
 */

;
(function ($) {

    //FlexSlider: Object Instance
    $.flexslider = function (el, options) {
        var slider = $(el),
            vars = $.extend({}, $.flexslider.defaults, options),
            namespace = vars.namespace,
            touch = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch,
            eventType = (touch) ? "touchend" : "click",
            vertical = vars.direction === "vertical",
            reverse = vars.reverse,
            carousel = (vars.itemWidth > 0),
            fade = vars.animation === "fade",
            asNav = vars.asNavFor !== "",
            methods = {};

        // Store a reference to the slider object
        $.data(el, "flexslider", slider);

        // Privat slider methods
        methods = {
            init: function () {
                slider.animating = false;
                slider.currentSlide = vars.startAt;
                slider.animatingTo = slider.currentSlide;
                slider.atEnd = (slider.currentSlide === 0 || slider.currentSlide === slider.last);
                slider.containerSelector = vars.selector.substr(0, vars.selector.search(' '));
                slider.slides = $(vars.selector, slider);
                slider.container = $(slider.containerSelector, slider);
                slider.count = slider.slides.length;
                // SYNC:
                slider.syncExists = $(vars.sync).length > 0;
                // SLIDE:
                if (vars.animation === "slide") vars.animation = "swing";
                slider.prop = (vertical) ? "top" : "marginLeft";
                slider.args = {};
                // SLIDESHOW:
                slider.manualPause = false;
                // TOUCH/USECSS:
                slider.transitions = !vars.video && !fade && vars.useCSS && (function () {
                    var obj =...