我在使用 carouFredSel 的响应式轮播时遇到高度问题。
因为图像是响应式的，并且轮播也设置为响应式。
它仍然将图像的最大高度添加到 div。
当我的图像为 740 宽且高度为 960 时。它将图像调整为响应宽度以适应屏幕，图像也被重新调整以适应宽度，但 div 似乎仍然认为存在高度的图像960。
我该如何解决这个问题？
【问题讨论】：
标签： javascript responsive-design caroufredsel
我不久前偶然发现了这个问题；我找到的唯一解决方案是在调整浏览器大小时调整容器大小。它可以解决问题，但我的书呆子不太喜欢它。
我只引用了轮播，并添加了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 插件。另外，现在谁需要破解滑块来使其响应？！
【讨论】：
.css()（不需要'px' btw）我使用carousel.parent().add(carousel).height(thisHeight);。非常感谢！
height:'700px'，这是一个更大的值，然后似乎一切都计算正确。即使我调整浏览器的大小，计算的高度和内容也会在右下方。但是任何人都可以快速回答我为什么当我设置height:'700px' 时会发生这种情况，这有什么缺点吗？？
什么对我有用（甚至可以追溯到我的模板中的 6.0.3 版）：
在两个项目和主要选项中设置高度：'变量'，例如：
$('#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');
【讨论】：
我在 carouFredsel 6.2.0 中遇到了一个问题，当在配置中给定 height:'variable' 时，创建的包装器更新了它的高度 OK，但实际的项目列表将停留在第一个项目的高度上。然后，这会裁剪掉任何比第一个更高的后续项目。 updateSizes 触发器似乎没有做任何事情，所以我使用 onAfter 事件解决了它；
scroll : {
onAfter : function( data ) {
var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
$(this).css('height', carousel_height);
}
}
【讨论】：
没有 hack，这是使用 6.2.1 中的自定义事件。在为页面创建滑块后，设置一个窗口调整大小处理程序，并在其中为每个滑块获取新高度并使用“配置”事件来重置该滑块的高度。最后触发“updateSizes”事件。 相关代码：
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');
}
理想情况下，您应该通过超时或 requestanimationframe 来实现窗口调整大小事件，但这是基础。
【讨论】：
我在使用 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 的东西。性能也更高，因为在单个调整大小期间拖动窗口框架时，绑定到 window.resize 事件可以多次触发该函数。
【讨论】：
我遇到了同样的问题并做了以下操作：
删除了从 3648 到 3652 的行，这些行看起来像：
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 那样裁剪元素！
希望对你有帮助 拉斐尔·安吉琳
【讨论】：
height：“auto”表示轮播的高度将与内部最高项目的高度相同，包括不可见的项目！在响应模式下，只会更改可见项目的高度，因此轮播的高度将保持不变。 （不会更改任何可见项目。）
您应该使用 height: "variable" 代替，它仅根据可见项目的高度自动调整轮播的大小。
更多详情请见规格：http://caroufredsel.dev7studios.com/configuration.php
希望这会有所帮助。问候迪奇
【讨论】：
http://caroufredsel.dev7studios.com/examples/responsive-carousels.php 诀窍是使项目内部的宽度和高度。
$("#foo2").carouFredSel({
responsive : true,
scroll : {
fx : "crossfade"
},
items : {
visible : 1,
width : 870,
height : "46%"
}
});
你好拉尔斯
【讨论】：
为插件和对我有用的项目指定 100% 的高度：
$('#carousel').carouFredSel({
responsive: true,
width: '100%',
height: '100%',
items: {
height: '100%'
}
});
【讨论】：
我认为 Lars 的想法是正确的，如果你为高度指定一个 % 并且你启用了 Responsive : true 你并没有给它一个百分比的 Parent 包装器，你声明一个 % 的比率高度到宽度。因此，如果您的滑块在全宽时为 1000 像素宽，并且您希望它在全宽时为 500 像素高设置 height : "50%" 将为您提供正确的起始高度，并且您的图像将根据页面大小调整而刷新.
查看本页第二个示例中的代码http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php
【讨论】：
我明白了，caroufredsel 响应式工作正常，您只需要将图像的 css 设置为这样。
.caroufredsel_wrapper ul li img{
height: auto;
max-width: 100%;
width: 100%;
}
caroufredsel 响应式功能只会让您获得图像高度 不需要 jquery/javascript 就可以了。
【讨论】：
皮埃尔的回答几乎有效，除了它不检查最高的幻灯片，它检查第一张幻灯片的高度。在我的幻灯片中，第 5 张幻灯片更高，最后被切断了。
但是，经过修改后，我发现在调整大小时使用配置会强制调整高度！因此，作为替代方案，这是打开调试的函数。
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: function () {
$(window).on('resize', function () {
carousel.trigger('configuration', ['debug', false, true]);
}).trigger('resize');
}
});
【讨论】：
我的情况是：
1) 在 Firefox 上，carouFredSel carousal 中的图像是响应式的，即当我们改变窗口大小时，可以在 caroufredsel_wrapper 上将图像调整为新的宽度和高度。
2) 在 Chrome 上，不显示 carousal 中的图像。但是，当我们改变屏幕尺寸时，哪怕是一点点，图像都会以非物质形式出现并具有响应性。
var $j = jQuery.noConflict();
/**
* Init media gallery. Init carousel. Init zoom.
*/
function initMediaGallery() {
...
$j('#prod-gal').carouFredSel({
direction : "left",
responsive : true,
width : "100%",
height : "null",
prev : ".slick-prev",
next : ".slick-next",
items : {
display : "block",
float : "left",
height : "706",
visible : 2,
start : 0
},
scroll : {
items : {
visible:
{
min: 2,
max: 2
}
},
easing : "swing",
duration : 150,
pauseOnHover : true
},
auto : {
play : false,
timeoutDuration : 2000,
},
pagination: {
container : ".pagination",
anchorBuilder : false
},
});
}
** 据我了解，在我的情况下，图像高度可以是“可变的”或一个固定值，例如 706。这只是初始全屏尺寸，当我们设置“responsive: ture”时，carouFredSel 应该可以自动计算所有图像的尺寸。但是为什么会这样呢？？
查看源代码，我们可以在 Chrome 上看到 .caroufredsel_wrapper height=0。一旦我们稍微改变浏览器大小，它将是 height=706（例如，在我的情况下）。
我尝试使用 resize 事件（如下所示）将包装器设置为初始大小，但它不起作用，除非我设置了固定值，例如 706。但如果我们设置一个固定值，它将始终是这个高度。
onCreate: function () {
var self = this;
$j(window).on('resize', function () {
$j(self).parent().height($j(self).children().first().height());
}).trigger('resize');
}
我们可以调试js，看到返回的高度默认为0，即使我们在初始化时为每个项目图像设置了一个固定值。
console.log($j(self).children().first().height());
到目前为止，我们可以假设在初始化 carouFredSel 对象时，carouFreSel js 无法正确创建高度。最后，我尝试进行此更改，因为在 Chrome 上启动时计算图像高度时 carouFredSel 看起来有一些“错误”（我猜）。
<script type="text/javascript">
//jQuery(document).ready(function(){
jQuery(window).load(function(){ /* */
initMediaGallery();
});
</script>
【讨论】：