carouFredSel响应式高度

Question

我使用carouFredSel响应式走马灯时出现了高度问题。

因为图片是响应式的，而且走马灯也设置为响应式。

它仍然将图像的最大高度添加到div中。

当我的图片宽度为740，高度为960时。它会调整图像大小以适应屏幕的响应式宽度，图像也会缩放以适应宽度，但div似乎仍然认为有一个高度为960的图像。

如何解决这个问题？

- nytrm

---

例如：http://jsfiddle.net/nytrm/nZxy4/1/ - nytrm

也许这个链接可以帮到你：https://dev59.com/Wn3aa4cB1Zd3GeqPgrPt - Drew Baker

Answer 1

我前段时间遇到了这个问题；我找到的唯一解决方案是在浏览器被调整大小时调整容器的大小。它可行，但是对于我这样一个吹毛求疵的人来说不太满意。

我只是提到了旋转木马，并添加了 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插件。此外，谁还需要去hack一个滑块以使其响应现在呢？！

- Pierre

---

感谢您的临时解决方案 :) - nytrm

谢谢，我没有找到其他的解决方法，所以我正在使用这个。 - nytrm

好的解决方案，一年后仍然适用（至少几乎如此）。我改变的唯一一件事是为了缩短它的长度，而不是使用 .css()（顺便说一下，这不需要 'px'），我使用了 carousel.parent().add(carousel).height(thisHeight);。非常感谢！ - Chris Rockwell

这个不起作用，因为它检查的是第一张幻灯片的高度，而不是最高幻灯片的高度。我的第五张幻灯片更高，结果被裁剪了。我发现触发配置可以解决高度问题，请参见下文。 - Will Lanni

添加这个也没有帮助。当全部失败时，我设置了 height:'700px'，这是一个比较大的值，然后似乎一切都被正确计算了。即使我重新调整浏览器大小，高度也可以正确计算，内容可以在右侧下方。但是，有人能不能快速回答我，为什么我设置 height:'700px' 时会发生这种情况，并且是否存在任何缺点？ - dev-m

不，我的这种方法有时在调整窗口大小时不起作用，因为我发现当调整大小时包装器div的高度有时会小于ul的高度。所以我只是通过js文件中的set size函数将包装器div的高度设置为最高项的高度。 - dev-m

Answer 2

对我而言有效的方法（甚至在我的模板版本6.0.3中也适用）：

是在项目和主选项中都设置height: 'variable'，例如：

    $('#foo').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    items: {
        height: 'variable'
    }
});

我可以在任何时候调整大小，而不会再裁剪DIV等中的文本...

- hi-tech

---

将您展示的高度添加到项上就解决了问题。我也尝试过更改插件代码，但那不是好的做法。 - Johansrk

感谢您的回答。简单易懂。 - Jarco

谢谢你！添加高度属性解决了当旋转设备从横向视图到纵向视图时高度不自动调整的问题。我已在iPhone和Android设备上进行了测试。 - Jimit Shah

Answer 3

$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');

- Guille21

Answer 4

我在carouFredsel 6.2.0中遇到了一个问题，当在配置中设置height:'variable'时，创建的包装器可以正常更新其高度，但实际的项目列表会被固定为第一个项目的高度。这将裁剪掉任何比第一个更高的后续项目。updateSizes触发器似乎没有起作用，所以我使用了onAfter事件来解决这个问题；

scroll : {
  onAfter : function( data ) {          
    var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
    $(this).css('height', carousel_height);
  }
 }

- Luc Pestille

Answer 5

没有黑客，这是使用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');
}

理想情况下，你应该通过timeout或requestanimationframe实现窗口调整大小事件，但这是基础知识。

- S2.

Answer 6

对于插件和项目，都指定100％的高度对我有效：

$('#carousel').carouFredSel({
    responsive: true,
    width: '100%',
    height: '100%',
    items: {
        height: '100%'
    }
});

- Tim

Answer 7

我在使用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部分。这样做更加高效，因为绑定到窗口调整大小事件可能会在单个调整大小期间多次触发函数，例如拖动窗口框架。

- Dan

Answer 8

我曾经遇到过同样的问题，然后进行了以下操作：

删除了从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 元素一样裁剪元素了！

希望这有所帮助， Rafael Angeline

- Rafael Angeline

Answer 9

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php诀窍在于使项目内的宽度和高度。

$("#foo2").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "crossfade"
    },
    items       : {
        visible     : 1,
        width       : 870,
        height      : "46%"
    }
});

你好，Lars

- Lars Jendrzejewski

---

这仅在初始化时起作用，它不会随着您调整浏览器窗口大小而调整。 - Drew Baker

Answer 10

我想通了，caroufredsel响应式很好用，你只需要将图像的CSS设置成这样就可以了。

.caroufredsel_wrapper ul li img{
    height: auto;
    max-width: 100%;
    width: 100%;
}

Caroufredsel响应功能将仅获取图像高度，无需使用jquery / javascript即可完成。

- tnchuntic