Question

我正在使用猫头鹰旋转木马在我们的主页上创建一个画廊旋转木马/幻灯片。 http://owlgraphic.com/owlcarousel/

但我们希望它能够快速响应，但不会调整图像大小，而是将宽度均匀地裁剪到某个最大值＆＃34;裁剪量＆＃34;。这是迄今为止的代码。

$(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效果最好，同时调整大小，但在调整大小时，您可以看到重叠的图像。这可能是由于＆＃34;刷新率＆＃34;或者触发调整大小事件的频率。我以为我需要手动隐藏项目并仅显示当前项目。欢迎任何其他解决方案。

Answer 1

似乎我的裁剪代码按预期工作，它是owl-carousel有这种行为（即使没有我的代码，如果你进入他们的网站并调整他们的一些演示，你会看到重叠的图像一秒钟）避免这种情况的方法是使其宽度可扩展，但这不是我们想要的。现在我们要放手，另一个选择是在每次操作之前用jquery手动隐藏/显示内容。

调整大小jquery css的猫头鹰轮播响应裁剪宽度

1 个答案: