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

Posted

技术标签:

【中文标题】调整jquery css大小时的猫头鹰轮播响应裁剪宽度【英文标题】:Owl-carousel responsive crop width on resize jquery css 【发布时间】:2014-08-11 08:42:46 【问题描述】:

我正在使用 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,似乎都没有按我的意愿工作,总是有重叠的图像或页面右侧的这个白色块(因为图像正在向左移动)起作用的一件事是使#home-carousel div 具有非常高的宽度,例如 10,000,但这并不好,因为页面上会出现水平滚动条。

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

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

【问题讨论】:

请提供演示小提琴 【参考方案1】:

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

【讨论】:

以上是关于调整jquery css大小时的猫头鹰轮播响应裁剪宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何调整 Bootstrap 轮播的 CSS 响应性

猫头鹰轮播2垂直图片分页

猫头鹰轮播:不将 data-src 值拉为 Vimeo 视频的 CSS 中的背景图像

jQuery 调整大小(拖放)和裁剪

使用带有响应式设计/流体宽度 CSS 的 jCrop

猫头鹰轮播不适用于引导选项卡导航