javascript - 在响应式 slider 中设置高度(jQuery Cycle)

Question

我正在使用 jQuery Cycle 制作几张幻灯片，下面是内容。 jQuery Cycle 将parent设置为relative，child滑动设置为absolute，这样应该在它下面的内容就被覆盖了。通常，我会给父容器一个高度来解决我的问题。

由于布局是响应式的，所以高度可以改变。有没有简单的解决方案？

编辑:

这是为我做的事情:

$(window).load(function(){

    var rotate_height = $('#rotate div img').height();
    $('#rotate').css('height', rotate_height);

    $(window).resize(function() {
        if($(window).width() >= 960){
            rotate_height = 290;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 768 && $(window).width() <= 959) {
            rotate_height = 230;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() >= 480 && $(window).width() <= 767) {
            rotate_height = 210;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        } else if ($(window).width() <= 479) {
            rotate_height = 150;
            $('#rotate').css('height', rotate_height);
            $('#rotate').cycle('next');
        }
    });

    $('#rotate').cycle({
        fx: 'fade',
        fit: 1,
        containerResize: 0,
        slideResize: 0,
        height: rotate_height       
    });
});

cycle('next') 会在访问者调整显示器大小后强制将幻灯片切换到下一张。不理想，但图像不会按比例缩小，只有在更换幻灯片之后。

Answer 1

这是我的解决方案:

$(window).resize(function(){
    $('.cycle-container').each(function(){      
        $(this).height($(this).find('> *:first').outerHeight());
    })
});