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

Question

我在一些 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 的高度都是可变的，具体取决于它们的内容。如何使循环不将容器 div（部分）调整为最大的子高度？相反，我希望容器将每个动画的大小调整为当前子高度。

Answer 1

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

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

Answer 2

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

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

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

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