使用 javascript 调整 Cycle2 的大小让事情变得紧张

Question

我有一个 Cycle2 幻灯片，当 window 宽度超过 580px 时，我想自行动态调整大小。在 580px 及以下，我希望它占据屏幕的高度，减去页眉和分页器。

这是我的标记：

<div class="header-container">
    <div class="header"></div>
</div>
<div class="slideshow-container">
    <div class="cycle-slideshow" data-cycle-auto-height="24:13" data-cycle-slides="> .slide-container" data-cycle-timeout=4000 data-cycle-pager=".pager" data-cycle-pager-template="blah blah blah">
        <div class="cycle-prev"></div>
        <div class="cycle-next"></div>
        <div class="slide-container" style="background-image:url(yada/yada);"></div>
        <div class="slide-container" style="background-image:url(yada/yada/yada);"></div>
    </div>
</div>  
<div class="pager-container">
    <div class="pager"></div>                   
</div>

我试过以下代码：

//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
    $('.cycle-slideshow').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
    $('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}

效果相当好，但在 580 像素或更窄时，调整 window 大小时幻灯片会抖动，因为 Cycle2 不断尝试插入它自己的高度。

我的第二个解决方案是设置 .slideshow-container 的高度并添加和删除 .mobile-slideshow class 取决于 window 是否小于 581px:

//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
    $('.cycle-slideshow').addClass('mobile-slideshow');
    $('.slideshow-container').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
    $('.cycle-slideshow').removeClass('mobile-slideshow');
    $('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}

.mobile-slideshow 的高度为 100%！仅在移动视图中很重要。

除了幻灯片的高度在 580 像素以上时不稳定之外，这也非常有效，因为 .mobile-slideshow 不断尝试重新调整到容器高度的 100%。

有更好的方法吗？我试图使此功能尽可能简单，但是使用 javascript 调整元素大小所带来的紧张感使它变得很麻烦。

更新：

好的，你们中的一些人要求一个 jsFiddle 来演示发生了什么：JsFiddle

如您所见，当window 宽度超过580px 时，Cycle2 根据data-cycle-auto-height 属性调整它的大小。当它低于 580px 时，JQuery 脚本确定高度，但是当您缩小或扩展 window 时，它会在 Cycle2 的自动高度和 JQuery 脚本计算的高度之间来回跳转。

Answer 1

终于找到解决办法了。查看工作 fiddle http://jsfiddle.net/6azbw8re/4/

将您的 resize() 函数修改为以下内容，

function resize(){
    if($(window).width() < 581){            
        $('.header').html('JQuery script is determinging the height');
        var newHeight = $(window).height() - $('.header-container').height() - $('.pager-container').height();        
        $('#cycle-slideshow').addClass("change-height");
        $('head').append('<style> .change-height{ height:'+ newHeight+'px !important; } </style>');  
    }
    else{
        $('.header').html('cycle 2 is determining the height');
        $('.change-height#cycle-slideshow').removeClass('change-height');                        
    }
}

基本上，如果你想让它覆盖cycle2插件的确定值，你需要将!important添加到高度属性。

使用 javascript 调整 Cycle2 的大小让事情变得紧张

Resizing Cycle2 with javascript is making things jittery

javascript

jquery

css

responsive-design

jquery-cycle2