进度条

var $dowebok = $('.dowebok'),
    $progressbar = $('.slider-progressbar'),
    api = $dowebok.data('slidizle_api');

$dowebok.slidizle({
    loop: true,
    autoPlay: true,
    timeout: 5000
});

$dowebok.on('slidizle.change', function(e, api) {
    $progressbar.stop().css('width', 0);
});

$dowebok.on('slidizle.pause', function(e, api) {
    $progressbar.stop();
});

$dowebok.on('slidizle.play slidizle.resume slidizle.change', function(e, api) {
    if (api.isHover()) return;
    $progressbar.animate({
        width: '100%'
    }, api.getRemainingTimeout());
});

<div id="progressbar-slider" class="dowebok slider--animated" data-slidizle>
    <ul data-slidizle-content>
        <li style="background-image: url('img/01.jpg')"></li>
        <li style="background-image: url('img/02.jpg')"></li>
        <li style="background-image: url('img/03.jpg')"></li>
    </ul>

    <div data-slidizle-next>
        <i class="fa fa-arrow-right"></i>
    </div>
    <div data-slidizle-previous>
        <i class="fa fa-arrow-left"></i>
    </div>

    <div class="slider-progressbar"></div>

    <ul data-slidizle-navigation></ul>
</div>