jquery - jQuery サイクル、幅 100%、画像を垂直方向に中央揃え、ウィンドウのサイズ変更の問題

Question

HTML コード:

<div id="rotatorholder">
    <div id="slide1" class="slide"></div>
    <div id="slide2" class="slide"></div>
    <div id="slide3" class="slide"></div>
</div>

CSS コード:

#rotatorholder {
    margin: 0;
    border-bottom: 1px solid #cacaca;
    height: 100px;
    overflow: hidden;
}
#rotatorholder .slide {
    height: 100px;
    width: 100%;
}
#rotatorholder #slide1 {
    background: transparent url('http://swiatlemmalowane.pl/tmp/test.jpg') 50% 0 no-repeat;
}
#rotatorholder #slide2 {
    background: transparent url('http://swiatlemmalowane.pl/tmp/test.jpg') 50% 0 no-repeat;
}
#rotatorholder #slide3 {
    background: transparent url('http://swiatlemmalowane.pl/tmp/test.jpg') 50% 0 no-repeat;
}

js コード:

$('#rotatorholder').cycle({
    before: function () {
        console.log($('#rotatorholder').width());
        $("#rotatorholder div.slide").each(function () {
            $(this).width($('#rotatorholder').width());
        })
    }
    after: function () {
        console.log($('#rotatorholder').width());
        $("#rotatorholder div.slide").each(function () {
            $(this).width($('#rotatorholder').width());
        })
    }
});

$(window).resize(function () {
    var boxwidth = $('#rotatorholder').width();
    $("#rotatorholder div.slide").each(function () {
        $(this).width(boxwidth);
    })
});

問題: ブラウザー ウィンドウのサイズが変更されるまで、すべてが正常に機能します。その後、元の #rotatorholder 幅に基づいて、.slide 要素の幅が固定されます。ウィンドウのサイズ変更中に要素の幅を修正することができました (2 番目の js 部分)。また、要素は jQuery サイクル コールアウトで「前」を使用して正しい新しい幅を取得しますが、それでも 1 秒後に元の幅になります。

http://jsfiddle.net/Cyber​​ek /Q7bAJ / で確認してください。

小さなブラウザ幅で実行し、ブラウザに合わせて幅を広げます - 画像の「中心」はまだ中心にあるはずで、サイズ変更中ですが、サイズ変更を停止してサイクルが要素を変更するのを待つと、どういうわけかスライドの幅がオリジナルになりますコンテナ幅。

手伝ってくれてありがとう。