我使用carouFredSel响应式走马灯时出现了高度问题。
因为图片是响应式的,而且走马灯也设置为响应式。
它仍然将图像的最大高度添加到div中。
当我的图片宽度为740,高度为960时。它会调整图像大小以适应屏幕的响应式宽度,图像也会缩放以适应宽度,但div似乎仍然认为有一个高度为960的图像。
如何解决这个问题?
我使用carouFredSel响应式走马灯时出现了高度问题。
因为图片是响应式的,而且走马灯也设置为响应式。
它仍然将图像的最大高度添加到div中。
当我的图片宽度为740,高度为960时。它会调整图像大小以适应屏幕的响应式宽度,图像也会缩放以适应宽度,但div似乎仍然认为有一个高度为960的图像。
如何解决这个问题?
我前段时间遇到了这个问题;我找到的唯一解决方案是在浏览器被调整大小时调整容器的大小。它可行,但是对于我这样一个吹毛求疵的人来说不太满意。
我只是提到了旋转木马,并添加了 onCreate
函数:
var $carousel = $("#swiper");
$carousel.carouFredSel({
width: "100%",
height: "auto",
responsive: true,
auto: true,
scroll: { items: 1, fx: 'scroll' },
duration: 1000,
swipe: { onTouch: true, onMouse: true },
items: { visible: { min: 4, max: 4 } },
onCreate: onCreate
});
function onCreate() {
$(window).on('resize', onResize).trigger('resize');
}
function onResize() {
// Get all the possible height values from the slides
var heights = $carousel.children().map(function() { return $(this).height(); });
// Find the max height and set it
$carousel.parent().add($carousel).height(Math.max.apply(null, heights));
}
如果你在2015年仍在使用这个插件,那么现在是时候转移了。.css()
(顺便说一下,这不需要 'px'
),我使用了 carousel.parent().add(carousel).height(thisHeight);
。非常感谢! - Chris Rockwellheight:'700px'
,这是一个比较大的值,然后似乎一切都被正确计算了。即使我重新调整浏览器大小,高度也可以正确计算,内容可以在右侧下方。但是,有人能不能快速回答我,为什么我设置 height:'700px'
时会发生这种情况,并且是否存在任何缺点? - dev-m对我而言有效的方法(甚至在我的模板版本6.0.3中也适用):
是在项目和主选项中都设置height: 'variable',例如:
$('#foo').carouFredSel({
responsive: true,
width: '100%',
height: 'variable',
items: {
height: 'variable'
}
});
我可以在任何时候调整大小,而不会再裁剪DIV等中的文本...
$('#foo2').carouFredSel({
responsive: true,
auto: true,
width: "100%",
height: "100%",
scroll: 3,
prev: '#prev4',
next: '#next4',
items: {
width: '100%',
height: '100%'
}
}).trigger('resize');
scroll : {
onAfter : function( data ) {
var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
$(this).css('height', carousel_height);
}
}
var options = {
responsive: true,
height: 'auto',
onCreate: function() { jQuery(window).on('resize', resizeMyslider); },
// remaining options
...
};
myslider.carouFredSel(options);
function resizeMyslider(e) {
var newHeight = 0;
// Get new height of items (be sure css isn't setting a fixed height)
myslider.children().map(
function() {
newHeight = Math.max(newHeight, jQuery(this).height());
}
);
// Change configuration of slider
myslider.trigger('configuration', ['height', newHeight + 'px']);
// Tell slider to use new configuration height
myslider.trigger('updateSizes');
}
对于插件和项目,都指定100%的高度对我有效:
$('#carousel').carouFredSel({
responsive: true,
width: '100%',
height: '100%',
items: {
height: '100%'
}
});
我在使用CSS媒体查询来设置caroufredsel_wrapper元素的尺寸方面取得了一些成功,使用!important关键字,就像这样:
.caroufredsel_wrapper {
width: 700px !important;
height: 393px !important;
}
@media screen and (max-width: 768px){
.caroufredsel_wrapper {
width: 460px !important;
height: 258px !important;
}
}
我随后成功地摆脱了上面答案中的onCreate
部分。这样做更加高效,因为绑定到窗口调整大小事件可能会在单个调整大小期间多次触发函数,例如拖动窗口框架。
if (is_number(o.items[o.d[dim]]))
{
console.log(o.d[dim]);
return o.items[o.d[dim]];
}
这段代码位于函数 ms_getLargestSize 中。
这解决了列表高度的问题。为了解决包装器高度,我将第3609行的参数从true更改为false,该行代码如下:
var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);
更改为:
var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);
在此之后,滑块在调整大小时运行良好,不再像 div 元素一样裁剪元素了!
希望这有所帮助, Rafael Angeline
http://caroufredsel.dev7studios.com/examples/responsive-carousels.php诀窍在于使项目内的宽度和高度。
$("#foo2").carouFredSel({
responsive : true,
scroll : {
fx : "crossfade"
},
items : {
visible : 1,
width : 870,
height : "46%"
}
});
你好,Lars
.caroufredsel_wrapper ul li img{
height: auto;
max-width: 100%;
width: 100%;
}
Caroufredsel响应功能将仅获取图像高度,无需使用jquery / javascript即可完成。