只是 因加入了[透明遮照] 高度問題,一直控制不了 !
翻找好久 , 總算找到這篇 依原照片寬高來呈現的方法
Image slider: maintaining equal height for all images while keeping slider responsive
--
也能符合手機的瀏覽尺寸
//自動依圖尺寸
$(".owl-carousel").each(function () {
var $this = $(this);
$this.owlCarousel({
afterUpdate: function () {
updateSize($this);
},
afterInit: function () {
updateSize($this);
}
});
});
function updateSize($carousel) {
var maxHeight = 0;
$('.owl-item', $carousel).each(function () {
var $this = $(this);
var $image = $this.find('img');
//Max height
var prevHeight = $this.height();
var thisHeight = $this.height('auto').height();
$this.height(prevHeight);
maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);
//Set image as background
var imageSource = $image.attr('src');
$this.css('backgroundImage', 'url(' + imageSource + ')');
});
//Set equal height
$('.owl-item', $carousel).height(maxHeight); //maxHeight
$('#max-height').text(maxHeight + 'px'); //maxHeight
}
//
