使用 javascript 调整滑块大小

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

        }
    },

为了降低滑块的高度，我必须进行哪些更改？ 如果你去网站你会看到它真的很大。 该网站是审查，基本上这会根据上面的代码调整大小。但我想让它更小。

Answer 1

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

这里是滑块高度设置：

    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
    }

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

Answer 2

试试这个：

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

        $('#typology-header').height(150);// Set the height in pixel
        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');
            }
        }

    }
},