Question

如何删除最后一个Item之后的空格。这是一个bug或任何代码问题。 Space After LastItem

$owl.owlCarousel({
    loop: false,
    margin: 0,
    autoWidth: false,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: false,
        },
        600: {
            items: 3,
            nav: false
        },
        1000: {
            items: 5,
            loop: false,
            nav: false
        }
    }
});

Answer 1

我遇到同样的问题并在此链接上发现问题： https://www.bountysource.com/issues/39148667-issue-white-space-on-the-right-of-last-item-loop-false-autowidth-true-merge-true

此处作者在下面的代码中提供了替换插件的方法Owl.prototype.coordinates：

Owl.prototype.coordinates = function(position) {
    var multiplier = 1,
        newPosition = position - 1,
        coordinate;

    if (position === undefined) {
        return $.map(this._coordinates, $.proxy(function(coordinate, index) {
            return this.coordinates(index);
        }, this));
    }

    if (this.settings.center) {
        if (this.settings.rtl) {
            multiplier = -1;
            newPosition = position + 1;
        }

        coordinate = this._coordinates[position];
        coordinate += (this.width() - coordinate + (this._coordinates[newPosition] || 0)) / 2 * multiplier;
    } else {
        coordinate = this._coordinates[newPosition] || 0;

             //Added start
        var settings = this.settings,
            iterator,
            reciprocalItemsWidth,
            elementWidth;
        if ((settings.autoWidth || settings.merge) && !settings.loop) {
            iterator = this._items.length;
            reciprocalItemsWidth = this._items[--iterator].width();
            elementWidth = this.$element.width();
            while (iterator--) {
                reciprocalItemsWidth += this._items[iterator].width() + this.settings.margin;
                if (reciprocalItemsWidth > elementWidth) {
                    break;
                }
            }
            if (position > iterator && position > 0){
                var tempPosition = position;
                reciprocalItemsWidth = 0;
                while (tempPosition < this._items.length) {
                    reciprocalItemsWidth += this._items[tempPosition++].width() + this.settings.margin;
                }
                var direction = settings.rtl ? -1 : 1;
                coordinate = coordinate + direction * (elementWidth - reciprocalItemsWidth + this.settings.margin);
            }
        }
           // Added end
    }

    coordinate = Math.ceil(coordinate);

    return coordinate;
};

之后一切正常，但有一个减号：在插件更新后，此代码将无效，而此方法将再次替换（如果新版本中的此方法不会重命名或删除）

空间在owl-carousel的最后一项之后

1 个答案: