jQuery Cycle插件 - 容器自动高度

Question

我正在使用cycle插件来处理一些div，像这样：

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

所有的 .section div 标签都有不同的高度，这取决于它们内部的内容。我该如何让 Cycle 不调整容器 div （sections）到最高子元素的高度？相反，我希望每次动画时容器根据当前子元素的高度进行调整。

- Alex

---

你现在的CSS代码是什么？ - Marko

完全没有为 .sections/.section 编写CSS。我需要添加CSS吗？ 上述HTML位于页面侧边栏中。下面可以添加其他内容，这就是我需要自动高度容器的原因。 - Alex

Answer 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

- Alex

---

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

Answer 2

将containerResize选项设置为0并尝试。更多选项细节在这里。

- Teja Kantamneni

---

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

Answer 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());
    }
  });

我的项目高度也不同。在之前的版本中，它确保容器足够大以适应两个幻灯片中较大的一个。在之后的版本中，它只会调整大小到下一个幻灯片。这样它永远不会因为容器太小而溢出。

注意：这是循环1的内容。

- SpadXIII