Question

我在某些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（节）调整到最大子高度？相反，我希望容器在每个动画上调整当前子高度。

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

Answer 2

将containerResize选项设为0然后尝试。更多选项详情here。

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周期的

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

3 个答案: