Flexslider with custom slide durations

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider-min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/fonts/flexslider-icon.eot"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/fonts/flexslider-icon.svg"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/images/bg_play_pause.png"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/fonts/flexslider-icon.woff"></script>
<div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0">
                        
    <ul class="slides">
        <li data-duration="6000">
            <img src="http://placehold.it/600x210" alt="Alt" />
        </li>
        <li data-duration="2000">
            <img src="http://placehold.it/600x200" alt="Alt Text" />
        </li>
    </ul>
</div>

JavaScript

$(function(){
    
$hook = $('.flexslider');
$hook.flexslider({
    animation: $hook.data('animation'),
    controlNav: $hook.data('control-nav'),
    slideshow: $hook.data('slideshow'),
    startAt: $hook.data('start-at'),
                    pauseOnHover: true,
                    after: function(slider){
                        slider.stop();
                        slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
                        slider.play();
                    }
                });
});