我使用carouFredSel在响应式旋转木马上遇到高度问题。
因为图像是响应式的，旋转木马也设置为响应。
它仍然会将图像的最大高度添加到div。
当我的图像宽740且高度为960时，它会将图像调整为响应宽度以适合屏幕，图像也会重新调整以适应宽度，但div似乎仍然认为图像具有高度960。
如何解决此问题？
答案 0 :(得分：32)
我刚才偶然发现了这个问题;我找到的唯一解决方案是在调整浏览器大小时调整容器大小。它可以解决这个问题，但我的学究者并不喜欢它。
我只引用了旋转木马，并添加了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插件。另外，谁现在需要破解滑块以使其响应？！
答案 1 :(得分：23)
对我有用（甚至早在我的模板6.0.3版本中）：
设定高度：＆＃39;变量＆＃39;在两个项目和主要选项中：
$('#foo').carouFredSel({
responsive: true,
width: '100%',
height: 'variable',
items: {
height: 'variable'
}
});
我可以在任何时候调整大小，不再在DIV中播放文本......
答案 2 :(得分：2)
$('#foo2').carouFredSel({
responsive: true,
auto: true,
width: "100%",
height: "100%",
scroll: 3,
prev: '#prev4',
next: '#next4',
items: {
width: '100%',
height: '100%'
}
}).trigger('resize');
答案 3 :(得分：1)
我在carouFredsel 6.2.0中遇到了一个问题，其中创建的包装器在给定高度时更新了它的高度OK：配置中的'变量'，但实际的项目列表将与第一项的高度相关。然后，这会删除任何比第一个更高的后续项目。 updateSizes触发器似乎没有做任何事情，所以我使用onAfter事件解决了它;
scroll : {
onAfter : function( data ) {
var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
$(this).css('height', carousel_height);
}
}
答案 4 :(得分：1)
没有技巧，这是使用6.2.1中的自定义事件。在为页面创建滑块之后，设置一个窗口调整大小处理程序，并在其中为每个滑块获取新的高度，并使用'configuration'事件重置该滑块的高度。最后触发“ 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实现窗口调整大小事件，但这是基础。
答案 5 :(得分：0)
我在使用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事件可以在单次调整大小时拖动窗口框架多次触发函数。
答案 6 :(得分：0)
我遇到了同样的问题并做了以下事情：
删除了从3648到3652的行，这些行看起来像：
if (is_number(o.items[o.d[dim]]))
{
console.log(o.d[dim]);
return o.items[o.d[dim]];
}
此代码位于函数ms_getLargestSize。
中这解决了List高度问题。为了解决包装器高度我在第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
答案 7 :(得分：0)
高度：“自动”表示旋转木马的高度将与内部最高项目的高度一样，包括非可见项目！在响应模式下，只有可见项目的高度会发生变化，因此旋转木马的高度仍然相同。 （没有可见的项目不会被更改。）
你应该使用height：“variable”代替它，它会根据可见项目的高度自动调整轮播的大小。
更多内容请参阅规范：http://caroufredsel.dev7studios.com/configuration.php
希望这会有所帮助。关心Dirch
答案 8 :(得分：0)
http://caroufredsel.dev7studios.com/examples/responsive-carousels.php 诀窍是在物品内部制作宽度和高度。
$("#foo2").carouFredSel({
responsive : true,
scroll : {
fx : "crossfade"
},
items : {
visible : 1,
width : 870,
height : "46%"
}
});
问候拉斯
答案 9 :(得分：0)
为插件和为我工作的项目指定100％的高度：
$('#carousel').carouFredSel({
responsive: true,
width: '100%',
height: '100%',
items: {
height: '100%'
}
});
答案 10 :(得分：0)
我认为Lars有正确的想法，如果您为高度指定了％并且您启用了响应：真实，那么您不会给它一定百分比的父包装，而是宣布％的比例为高度宽度。因此，如果您的滑块宽度为1000px宽，并且您希望在全宽设置时高度为500px 高度：“50％”将为您提供正确的起始高度，您的图像将根据页面大小调整进行刷新
请参阅本页第二个示例中的代码http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php
答案 11 :(得分：0)
我弄明白了，caroufredsel reponsive工作得很好你只需要让你的图像css像这样。
.caroufredsel_wrapper ul li img{
height: auto;
max-width: 100%;
width: 100%;
}
caroufredsel响应功能只会让你的图像高度不需要jquery / javascript就可以了。
答案 12 :(得分：0)
皮埃尔的答案几乎可行，除了它没有检查最高的幻灯片，它会检查第一张幻灯片的高度。在我的幻灯片放映中，第五张幻灯片更高，并且被切断了。
然而，经过修修补补后，我发现在调整大小时使用配置会强制正确的高度！因此，作为一种替代方案，这就是它的功能，打开调试。
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');
}
});
答案 13 :(得分：-1)
我的情景是：
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无法正确创建高度。最后，我尝试进行此更改，因为看起来carouFredSel在Chrome上启动时计算图像高度时会出现一些“错误”（我猜）。
<script type="text/javascript">
//jQuery(document).ready(function(){
jQuery(window).load(function(){ /* */
initMediaGallery();
});
</script>