jquery - jquery cssのサイズ変更時のフクロウカルーセルレスポンシブクロップ幅

Question

フクロウ カルーセルを使用して、メイン ページにギャラリー カルーセル/スライド ショーを作成しています。http://owlgraphic.com/owlcarousel/

ただし、レスポンシブで画像のサイズを変更するのではなく、幅を特定の最大「トリミング量」まで均等にトリミングする必要があります。ここまでのコードです。

$(document).ready( function() {
    function scaleCarousel() {
        var imgWidth = 1000;
        var parentWidth = $('#home-carousel').parent().width();
        console.log("parent: "+parentWidth);
        if (parentWidth < 10000) {
            var crop = (parentWidth - imgWidth) / 2;
            console.log("crop: " +crop);
            if(crop < -200) crop = -200;
            $('.owl-wrapper-outer').css({position: "relative", left: crop + "px"});
        }
    }
    $(window).resize(function(){
        scaleCarousel();
    });
    scaleCarousel();
});

カルーセル div #home-carousel をターゲットにしようとしましたが、すべてのラッパー、アイテム、img、どれも思いどおりに機能していないようです。ページの右側に常に画像が重なっているか、この白いブロックがあります (画像が左に移動しています) #home-carousel div の幅を 10,000 のように非常に大きくすることでうまくいきましたが、ページに水平スクロールバーが表示されるため、これは適切ではありません。

たぶん、これを行うためのはるかに簡単な方法がありますか？

編集: サイズを小さくしている間は、img を移動するのがこれまでのところ最もうまく機能しますが、サイズを大きくしている間は画像が重なっているのを見ることができます。これは、「リフレッシュ レート」またはサイズ変更イベントがトリガーされる頻度が原因である可能性があります。アイテムを手動で非表示にして、現在のアイテムのみを表示する必要があると考えています。他の解決策は大歓迎です。