问题描述
在我的JS图片滑杆(Owl-Carousel)中,图片具有不同的尺寸:
js
$(document).ready(function(){
$(#owl-example)。owlCarousel({
afterUpdate:function(){
updateSize();
},
afterInit:function(){
updateSize();
}
} ;
function updateSize(){
var minHeight = parseInt($('。owl-item')。eq(0).css('height'));
$('。每个(函数(){
var thisHeight = parseInt($(this).css('height'));
minHeight =(minHeight });
$('。owl-wrapper-outer')。css('height',minHeight +'px');
}
});
css
.owl-carousel .owl-item img {
height:auto;
width:100%;
display:block;
}
.owl-carousel .item {
margin:0px;
}
EDIT2
关于最新的评论,为了显示大图像的底部,一种方法可以是迭代图像,并添加一个负顶部边缘,等于这些图像的一部分隐藏。
function updateSize(){
var minHeight = parseInt($('。owl-item')。eq(0).css高度'));
$('。owl-item')。each(function(){
var thisHeight = parseInt($(this).css('height'));
minHeight =(minHeight< ; = thisHeight?minHeight:thisHeight);
});
$('。owl-wrapper-outer')。css('height',minHeight +'px');
/ *显示裁剪图像的底部* /
$('。owl-carousel .owl-item img')。 thisHeight = parseInt($(this).css('height'));
if(thisHeight> minHeight){
$(this).css('margin-top', - 1 * -minHeight)+'px');
}
});
}
In my JS image slider (Owl-Carousel), images have different dimensions:
You can see that the image height varies within the carousel. How to make it constant while keeping carousel responsive? I need images to fill the slider space at all times, therefore some will have to be cropped through CSS somehow. The desired result looks like this:
It can be specified in css.
Example,
.owl-carousel .owl-item{
height:285px;
width:100%;
}
EDITThe following solution uses the plugin's callback events to modify the viewport's/wrapper's height according to the smallest image height.
js
$(document).ready(function () {
$("#owl-example").owlCarousel({
afterUpdate: function () {
updateSize();
},
afterInit:function(){
updateSize();
}
});
function updateSize(){
var minHeight=parseInt($('.owl-item').eq(0).css('height'));
$('.owl-item').each(function () {
var thisHeight = parseInt($(this).css('height'));
minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
});
$('.owl-wrapper-outer').css('height',minHeight+'px');
}
});
css
.owl-carousel .owl-item img {
height:auto;
width:100%;
display: block;
}
.owl-carousel .item {
margin:0px;
}
EDIT2
Regarding the latest comment, to show the bottom part of the large images one approach could be to iterate the images and add a negative top margin equal to the part of these images hidden.
function updateSize(){
var minHeight=parseInt($('.owl-item').eq(0).css('height'));
$('.owl-item').each(function () {
var thisHeight = parseInt($(this).css('height'));
minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
});
$('.owl-wrapper-outer').css('height',minHeight+'px');
/*show the bottom part of the cropped images*/
$('.owl-carousel .owl-item img').each(function(){
var thisHeight = parseInt($(this).css('height'));
if(thisHeight>minHeight){
$(this).css('margin-top',-1*(thisHeight-minHeight)+'px');
}
});
}
这篇关于图像滑块:保持所有图像的等高,同时保持滑块反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!