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

发布于 2024-09-08 11:51:02 字数 445 浏览 2 评论 0原文

我在某些 div 上使用 cycle 插件，如下所示：

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

原文

I'm using the cycle plugin on some divs, like this:

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

all the .section divs have variable height, based on their contents.
How can I make cycle not to resize the container div (sections) to the largest child height? Instead I want the container to resize on every animation to the current child height.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

攒一口袋星星 2024-09-15 11:51:03

将 containerResize 选项设置为 0 并尝试。更多选项详细信息请参见此处。

回复收藏 0 原文

千纸鹤 2024-09-15 11:51:03

我的做法有点不同：

  $('.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 周期的

I've done it a little bit different:

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

My items had different height as well. In the before, it makes sure the container is big enough for the bigger of the 2 slides. In the after, it just resizes to the next slide.
This way it never over-flows because your container is too small.

note: this is for cycle 1

回复收藏 0 原文

巨坚强 2024-09-15 11:51:02

好的，我设法通过在“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

ok, I managed to do it by hooking a function on 'after' event:

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

found the info here:
http://forum.jquery.com/topic/jquery-cycle-auto-height

回复收藏 0 原文

~没有更多了~