我在使用 carouFredSel 的响应式轮播时遇到高度问题。
因为图像是响应式的，并且轮播也设置为响应式。
它仍然将图像的最大高度添加到 div。
当我的图像为 740 宽且高度为 960 时。它将图像调整为响应宽度以适应屏幕，图像也被重新调整以适应宽度，但 div 似乎仍然认为存在高度为 960 的图像。
我该如何解决这个问题？
问问题
43788 次
14 回答
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 插件。另外，现在谁需要破解滑块以使其响应？！
于 2012-11-01T16:01:29.170 回答
24
什么对我有用（甚至可以追溯到我的模板中的 6.0.3 版）：
正在设置 height: 'variable' 在这两个项目和主要选项中，例如：
$('#foo').carouFredSel({
responsive: true,
width: '100%',
height: 'variable',
items: {
height: 'variable'
}
});
我可以随时调整大小，不再裁剪 DIV 等中的文本......
于 2013-07-25T04:01:22.290 回答
2
$('#foo2').carouFredSel({
responsive: true,
auto: true,
width: "100%",
height: "100%",
scroll: 3,
prev: '#prev4',
next: '#next4',
items: {
width: '100%',
height: '100%'
}
}).trigger('resize');
于 2013-09-23T15:41:53.250 回答
1
我在 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);
}
}
于 2013-06-20T08:58:50.310 回答
1
没有黑客，这是使用 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 来实现窗口调整大小事件，但这是基础。
于 2019-04-01T21:39:39.840 回答
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 事件可以多次触发该函数。
于 2012-12-13T11:59:54.390 回答
0
我遇到了同样的问题并做了以下事情：
删除了从 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 那样裁剪元素！
我希望它有所帮助，拉斐尔安吉琳
于 2013-02-10T23:16:30.640 回答
0
height: "auto" 表示旋转木马的高度将与内部最高项目的高度相同，包括不可见的项目！在响应模式下，只会更改可见项目的高度，因此轮播的高度将保持不变。（不会更改任何可见项目。）
您应该使用 height: "variable" 代替它仅根据可见项目的高度自动调整轮播的大小。
更多可在规格中找到： http: //caroufredsel.dev7studios.com/configuration.php
希望这可以帮助。问候迪奇
于 2013-03-01T14:56:26.367 回答
0
http://caroufredsel.dev7studios.com/examples/responsive-carousels.php 诀窍是在项目内部设置宽度和高度。
$("#foo2").carouFredSel({
responsive : true,
scroll : {
fx : "crossfade"
},
items : {
visible : 1,
width : 870,
height : "46%"
}
});
问候拉尔斯
于 2013-03-09T22:41:35.533 回答
0
为插件和对我有用的项目指定 100% 的高度：
$('#carousel').carouFredSel({
responsive: true,
width: '100%',
height: '100%',
items: {
height: '100%'
}
});
于 2013-12-19T00:32:40.630 回答
0
我认为 Lars 的想法是正确的，如果您为高度指定 % 并且启用了Responsive : true，那么您并没有给它一个父包装器的百分比，您声明的是高度与宽度的百分比。因此，如果您的滑块在全宽时为 1000 像素宽，并且您希望它在全宽设置高度时为 500 像素高：“50%”将为您提供正确的起始高度，并且您的图像将根据页面大小调整而刷新。
请参阅此页面上第二个示例的代码http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php
于 2013-12-23T22:05:10.050 回答
0
我想通了，caroufredsel 响应式工作正常，您只需要将图像的 css 设置为这样。
.caroufredsel_wrapper ul li img{
height: auto;
max-width: 100%;
width: 100%;
}
caroufredsel 响应式功能只会让您获得图像高度 不需要 jquery/javascript 就可以了。
于 2014-03-27T00:11:31.847 回答
0
皮埃尔的回答几乎有效，除了它不检查最高的幻灯片，它检查第一张幻灯片的高度。在我的幻灯片放映中，第五张幻灯片更高，最后被切断了。
然而，在修修补补之后，我发现使用 resize 上的配置会强制调整高度！因此，作为替代方案，这是打开调试的功能。
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');
}
});
于 2014-05-20T01:12:05.190 回答
-1
我的情况是：
1) 在火狐上，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（例如，在我的情况下）。
我尝试使用调整大小事件（如下所示），将包装器设置为初始大小，但它不工作，除非我设置了固定值，如 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>
于 2015-02-05T04:10:08.610 回答