调整jquery css上的Owl转盘响应裁剪宽度

我正在使用owl旋转木马在主页上创建一个画廊旋转木马/幻灯片放映

但我们希望它能够响应，但不会调整图像大小，而是将宽度平均裁剪到某个最大“裁剪量”。这是到目前为止的代码

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

$（文档）.ready（函数（）{
函数scaleCarousel（）{
var imgWidth=1000；
var parentWidth=$（“#主旋转木马”）.parent（）.width（）；
console.log（“父项：+parentWidth”）；
if（parentWidth<10000）{
var-crop=（parentWidth-imgWidth）/2；
控制台日志（“裁剪：+裁剪”）；
如果（作物<-200）作物=-200；
$（'.owl wrapper outer'）.css（{position:“relative”，left:crop+“px”}）；
}
}
$（窗口）。调整大小（函数（）{
鳞片状突起（）；
});
鳞片状突起（）；
});

我试着瞄准我的旋转木马div#home carousel，所有的包装、物品、img，它们似乎都没有我想要的效果，页面右侧总是有重叠的图像或这个白色块（因为图像正在向左移动）一个有效的方法是使#home carousel div具有非常高的宽度（如10000），但这并不好，因为页面上会出现水平滚动条

也许有一种更简单的方法可以做到这一点

---

编辑：到目前为止，移动img效果最好，缩小时效果最好，但增大时可以看到重叠图像。这可能是由于“刷新率”或触发调整大小事件的频率。我想我需要手动隐藏项目，只显示当前项目。任何其他解决方案都是受欢迎的。

看来我的裁剪代码是按预期工作的，是owl carousel有这种行为（即使没有我的代码，如果你进入他们的网站并调整一些演示的大小，你会在第二时间看到重叠的图像），避免这种情况的唯一方法是使其在宽度上可伸缩，但这不是我们想要的。现在我们不考虑这个问题，另一个选择是在每次操作之前使用jquery手动隐藏/显示内容。

请提供演示小提琴