使用javascript调整滑块大小

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

下面是滑块高度的设置:

    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
    }

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

尝试以下操作:

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

    }
},