carouFredSel响应高度

Question

我在使用carouFredSel时遇到了响应式传送带的高度问题。

因为图像是响应性的，并且轮播也被设置为响应性。

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

当我的图像宽度为740，高度为960时。它将图像调整到响应的宽度以适应屏幕，图像也会重新缩放以适应宽度，但div似乎仍然认为存在高度为960的图像。

如何解决此问题？

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插件。此外，如今谁需要修改滑块才能使其具有响应性？

Answer 2

对我有效的方法(甚至早在我的模板6.0.3版本之前)：

在项目和主选项中设置高度：'variable‘，如下所示：

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

我可以在任何时候调整大小，而不再裁剪DIVs中的文本。

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');