我正在使用 Owl Carousel 在我们的主页上创建画廊轮播/幻灯片放映。 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,它们似乎都没有按照我想要的方式工作,总是有重叠的图像或页面右侧的白色 block (因为图像向左移动)有效的一件事是使 #home-carousel div 具有非常高的宽度,例如 10,000,但这并不好,因为页面上会出现水平滚动条。
也许有更简单的方法来做到这一点?
编辑:到目前为止,移动 img 效果最好,同时缩小尺寸,但在放大尺寸时,您可以看到重叠的图像。这可能是由于“刷新率”或触发调整大小事件的频率。我想我需要手动隐藏项目并仅显示当前项目。欢迎任何其他解决方案。
最佳答案
看来我的裁剪代码按预期工作,它是 owl-carousel 具有这种行为(即使没有我的代码,如果你进入他们的网站并调整他们的一些演示的大小,你会看到重叠的图像一秒钟)避免这种情况的方法是使其宽度可扩展,但这不是我们想要的。现在我们放弃这个,另一个选择是在每个操作之前使用 jquery 手动隐藏/显示内容。
关于jquery - Owl Carousel 响应裁剪宽度调整 jquery css 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24329835/