javascript - 使用 JavaScript 调整 slider 大小

Question

当前代码:

cover_height: function() {

        if (!$('.typology-cover-empty').length) {

            var cover_height = $(window).height() - this.settings.admin_bar_height + Math.abs(parseInt($('.typology-section:first').css('top'), 10));
            var cover_content_height = $('.cover-item-container').height();
            var header_height = $('#typology-header').height();
            var cover_auto = true;

            if (cover_height < 450) {
                cover_height = 450;
            }

            if (cover_content_height > cover_height - header_height) {
                cover_height = cover_content_height + header_height + 100;
                cover_auto = false;
            }


            if ($(window).width() <= 1366) {

                this.settings.cover_height = cover_height;
                $('.typology-cover-item').css('height', cover_height);
                $('.typology-cover').css('height', cover_height);

            } else {
                $('.typology-cover-item').css('height', $('.typology-cover').height());
                $('.typology-cover').css('height', $('.typology-cover').height());
                this.settings.cover_height = $('.typology-cover').height();
            }

            if (cover_auto) {
                if (!$('.typology-cover-slider').length) {
                    $('.typology-cover-item').css('position', 'fixed');
                } else {
                    $('.typology-slider-wrapper-fixed').css('position', 'fixed');
                }
            }

        }
    },

为了降低 slider 的高度，我必须更改什么？如果您访问该网站，您会发现它非常大。该网站经过审查，基本上是根据上面的代码调整大小的。但我想让它更小。

Answer 1

slider 高度由该脚本计算。计算取决于窗口高度和 slider 内容的高度。我认为设置 slider 的固定高度不是一个好主意。如果这样做，您将失去 slider 的响应能力。

这里是 slider 高度的设置:

    if ($(window).width() <= 1366) {

        this.settings.cover_height = cover_height;// this variable contains the calculated height if the windows width is lower than 1366
        $('.typology-cover-item').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
        $('.typology-cover').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366

    } else {
        $('.typology-cover-item').css('height', $('.typology-cover').height());// if windows width is greater than 1366 sliders Elements are set to its "natural height"
        $('.typology-cover').css('height', $('.typology-cover').height());
        this.settings.cover_height = $('.typology-cover').height();// if windows width is greater than 1366 sliders Elements are set to its "natural height"
    }

您可以执行以下操作来降低高度:

    var reduceHeightValue = 50;
    if ($(window).width() <= 1366) {

        this.settings.cover_height = cover_height - reduceHeightValue;// reduce the height by 50 if windows width is lower than 1366
        $('.typology-cover-item').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
        $('.typology-cover').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366

    } else {
        $('.typology-cover-item').css('height', $('.typology-cover').height() - reduceHeightValue);// reduce the height by 50 if windows width is greater than 1366
        $('.typology-cover').css('height', $('.typology-cover').height() - reduceHeightValue);// reduce the height by 50 if windows width is greater than 1366
        this.settings.cover_height = $('.typology-cover').height() - reduceHeightValue;// reduce the height by 50 if windows width is greater than 1366
    }

这种黑客可以为您工作，但大多数时候以这种方式更改现有代码并不是一个好主意，因为它会破坏某些东西。显然，这个 slider 有一些设置，可以设置高度。我建议使用此设置。阅读 slider 的文档并以适当的方式设置高度。