Owl-carousel responsive crop width on resize jquery css

Question

I'm using owl carousel to create a gallery carousel/slide show on our main page. http://owlgraphic.com/owlcarousel/

But we want it to be responsive but not resize the image, instead crop the width equally up to a certain maximum "crop amount". Here is the code so far.

$(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();
});

I've tried targeting my carousel div #home-carousel, all the wrappers, items, img, none of them seem to work as I want, there is always overlapping images or this white block on the right of the page (because the image is moving to the left) One thing that worked was making #home-carousel div have a very high width like 10,000 but that is not good because of the horizontal scrollbar that will appear on the page.

Maybe there is a much simpler way to do this?

EDIT: moving the img works best so far, while sizing down, but while sizing up you can see overlapping images. This may be due to "refresh rate" or how often the resize event is triggered. I'm thinking i'll need to manually hide items and show current one only. Any other solution is welcome.

Answer 1

It seems my cropping code was working as intended, it is owl-carousel that has this behavior (even without my code, if you got on their site and resize some of their demos you will see overlapping images for a second) only way to avoid this is to make it scalable in width, but that is not what we wanted. For now we are letting this go, another option would be to hide/show content manually with jquery before every action.