jQuery Cycle 插件 - 容器的自动高度答案

【问题标题】：jQuery Cycle plugin - Automatic height for containersjQuery Cycle 插件 - 容器的自动高度
【发布时间】：2011-03-13 07:45:39
【问题描述】：

我在一些 div 上使用cycle plugin，如下所示：

<div class="sections">
  <div class="Section"> <img /> text </div>
  <div class="Section"> <img /> text </div>
  <div class="Section"> <img /> text </div>
</div>

所有 .section div 的高度都是可变的，具体取决于它们的内容。如何使循环不将容器 div（部分）调整为最大的子高度？相反，我希望容器将每个动画的大小调整为当前子高度。

【问题讨论】：

你当前的 CSS 代码是什么？
.sections/.section 根本没有 CSS。我应该添加任何 CSS 吗？上面的 html 位于页面侧边栏中。在它下面可以添加其他内容，这就是我需要自动高度容器的原因

标签： javascript jquery jquery-cycle

【解决方案1】：

好的，我设法通过在 'after' 事件上挂钩一个函数来做到这一点：

function onAfter(curr, next, opts, fwd) {
  var $ht = $(this).height();

  //set the container's height to that of the current slide
  $(this).parent().animate({height: $ht});
}

在这里找到信息： http://forum.jquery.com/topic/jquery-cycle-auto-height

【讨论】：

这很好，但是如何在动态添加内联内容后循环重新计算高度？

【解决方案2】：

将containerResize 选项设置为0 并尝试。更多选项详情here。

【讨论】：

你必须使用完整版，而不是精简版。

【解决方案3】：

我做了一些不同的事情：

  $('.cycle-list').cycle({
    containerResize: 0,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
      var container = $(this).parent();
      container.css('height', Math.max(container.height(), $(nextSlideElement).height()));
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
      $(this).parent().css('height', $(this).height());
    }
  });

我的物品也有不同的高度。在之前，它确保容器足够大以容纳 2 张幻灯片中较大的一张。之后，它只是调整到下一张幻灯片的大小。这样它就不会因为你的容器太小而溢出。

注意：这是针对第 1 周期的

【讨论】：