我正在使用猫头鹰轮播在我们的主页上创建画廊轮播/幻灯片放映。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到目前为止效果最好，但是向上调整时您可以看到重叠的图像。这可能是由于“刷新率”或调整大小事件被触发的频率。我在想我需要手动隐藏项目并仅显示当前项目。任何其他解决方案都欢迎。
看来我的裁剪代码按预期方式工作，是猫头鹰轮播具有这种行为（即使没有我的代码，如果您进入他们的网站并调整其演示的大小，您也会看到重叠的图像一秒钟），这是避免这种情况的唯一方法这是为了使其宽度可扩展，但这不是我们想要的。现在我们放手，另一种选择是在每次操作之前使用jquery手动隐藏/显示内容。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句