我使用 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 年仍在使用这个插件,那么是时候继续前进了。
不再支持免费版本,商业版本现在是 Wordpress 插件。另外,现在谁需要修改滑块才能使其响应?!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)