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版本):

设置高度:'变量'在两个项目和主要选项中,如:

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

我可以在任何时候调整大小,不再在DIV中播放文本等...