Owl 不同尺寸图片的轮播？

Question

I have seen this demo for images

我要求 owl 轮播必须始终保持相同的宽度和高度。例如。必须符合给定的边界。

图片应使用background-size: contain使其合身。所以我担心我不能直接使用 img 标签。

下一张图片必须紧挨着下一张，中间没有白色space。

例如应如下所示：

因此显示的图片数量未知，具体取决于图片的比例和宽度

有没有办法用 owl 轮播来做到这一点？

Answer 1

您可以将容器设置为您需要的任何大小，并将图像设置为 css 中的背景，每张图像如下：

.item.item1{
   background: url(images/slide1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;

}

.item.item2{
   background: url(images/slide2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;

}

这将使所有图像保持相同大小，但会根据需要裁剪它们以适合您预定义的大小。这种方法的缺点是您必须在 CSS 中定义图像，而不是 HTML - 但我之前在 OWL 滑块上使用过这种方法。

Answer 2

我最近运行遇到了与 Owl 轮播类似的问题。在单个轮播中使用三种不同的图像宽高比，您可以在此处应用相同的逻辑。

首先，我将外部owl-container设为视口的流体宽度：

#owl-container {
  width:50%;
  height:100%;
  position:relative;
}

然后 owl-item img 适合这个：

#owl-carousel .item img {
  display:block;
  width:100%;
  height:100%;
  margin:0
}

在为每个单独的图像宽高比赋予独特的流体宽度之前，适合以上并使您能够匹配每个高度（来回计算正确的百分比）：

.landscape {
   width:100%;
}

.portrait {
  width:25%;
}

.square {
  width:50%
}

让每张幻灯片的代码看起来像这样：

<div class="item landscape"><img src="../xyz.jpg" alt="xyz"></div>
<div class="item portrait"><img src="../xyz.jpg" alt="xyz"></div>
<div class="item square"><img src="../xyz.jpg" alt="xyz"></div>

Answer 3

尽管这是一个老问题，但我也有同样的问题。这是我的解决方案：

jQuery(document).ready(function($) {
  $(".owl-carousel").each(function(index, el) {
    var containerHeight = $(el).height();
    $(el).find("img").each(function(index, img) {
      var w = $(img).prop('naturalWidth');
      var h = $(img).prop('naturalHeight');
      $(img).css({
        'width': Math.round(containerHeight * w / h) + 'px',
        'height': containerHeight + 'px'
      });
    }),
    $(el).owlCarousel({
      autoWidth: true
    });
  });
});

它调整轮播中图像的大小以适应轮播容器所需的高度设置（遵守纵横比）。

jsFiddle 中的完整示例：http://jsfiddle.net/yzLqv3qk/

Answer 4

是的，这是一个非常古老的问题，但我不得不在 Arnie Schraufenziger 的回答中添加更多内容，因为他的代码会在顶部发送图片。

$(".owl-carousel").each(function(index, el) {
    var containerHeight = $(el).height();
    $(el).find("img").each(function(index, img) {
        var w = $(img).prop('naturalWidth');
        var h = $(img).prop('naturalHeight');
        var winWidth = $(window).width();
        var differenceInHeight = containerHeight - (h / 2);
        if(w>h && winWidth >= 992){         
        $(img).css({
            'width': w + 'px',
            'height': 'auto',
            'max-height': containerHeight + 'px'
        });
        }else if (w>h && winWidth <= 991){
            $(img).css({
                'width': w + 'px',
                'height': 'auto',
                'max-height': containerHeight + 'px',
                'margin-top': differenceInHeight + 'px'
            });
        }else if(h>w && winWidth >= 992){
            $(img).css({
                'width': Math.round(containerHeight * w / h) + 'px',
                'height': containerHeight + 'px'
            });
        }else if(h>w && winWidth <= 991){
            $(img).css({
                'width': Math.round(containerHeight * w / h) + 'px',
                'height': containerHeight + 'px'
            });
        }
    }),
    $(el).owlCarousel({
      autoWidth: true
    });
  });

您可以根据自己的喜好设置所需的 windows 宽度 ;)

Owl 不同尺寸图片的轮播？

Owl carousel for images with different sizes?

jquery

css

image

owl-carousel