Skip to content

Instantly share code, notes, and snippets.

@emaildano

emaildano/flexslider-progress-bar.html

Created January 21, 2014 21:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save emaildano/8548390 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save emaildano/8548390 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. emaildano created this gist Jan 21, 2014.
    3 changes: 3 additions & 0 deletions flexslider-progress-bar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="progress_bar_container">
    <div class="progress_bar"></div>
    </div>
    48 changes: 48 additions & 0 deletions flexslider-progress-bar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    var slider = $('#introSlider');

    slider.flexslider({
    animation: "slide",
    directionNav: false,
    slideshow: true,
    slideshowSpeed: 8000,
    animationSpeed: 1500,
    start: function(slider){
    //initial load

    positionSlide();
    $(window).resize(positionSlide);

    $('#introSlider .slides > li').fadeIn(350);
    $('.caption').fadeIn(350);
    $('body').removeClass('loading');

    var progressBar = $('.progress_bar');
    progressBar.animate({'width': "100%"}, 8000, function(){
    $(this).css({'width' : 0})
    });

    $(".flex-control-paging li a").on("click", function(){
    $('.progress_bar_container').fadeOut(300);
    });

    // setTimeout(function(){
    // $('.caption').fadeOut(500);
    // }, 8000)
    },
    before: function(){
    //fires with each slide transition

    $('.caption').fadeOut(500);

    $('.progress_bar').animate({'width': "100%"}, 8000, function(){
    $(this).css({'width' : 0})
    });

    },
    after: function(){
    //firs after each slide completes
    $('.caption').fadeIn(350);


    }
    });