2

I'm using owl carousel to create a gallery carousel/slide show on our main page. http://owlgraphic.com/owlcarousel/

But we want it to be responsive but not resize the image, instead crop the width equally up to a certain maximum "crop amount". Here is the code so far.

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

I've tried targeting my carousel div #home-carousel, all the wrappers, items, img, none of them seem to work as I want, there is always overlapping images or this white block on the right of the page (because the image is moving to the left) One thing that worked was making #home-carousel div have a very high width like 10,000 but that is not good because of the horizontal scrollbar that will appear on the page.

Maybe there is a much simpler way to do this?

EDIT: moving the img works best so far, while sizing down, but while sizing up you can see overlapping images. This may be due to "refresh rate" or how often the resize event is triggered. I'm thinking i'll need to manually hide items and show current one only. Any other solution is welcome.

4

1 回答 1

0

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

于 2014-06-21T15:30:54.287 回答