Owlcarousel2: Issue: White space on the right of last item. (loop: false && (autoWidth: true || merge: true))

[gyx8899]

First, set with loop:false, autoWidth: false or merge:true.
Second, drag to the last item, there will be appear white space on the right.

At first sight, the white space is odd. It is unreasonable when last item width is small and owl container width is big.
The last item should be attach to the right of owl container.

[gyx8899]

jsfiddle demo: https://jsfiddle.net/JSDavi/j6qk4pq8/
@CracyCrazz

[gyx8899]

Hi @CracyCrazz, i have some try, and it works for me. Just below:

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

`

[gyx8899]

@daviddeutsch
I have test with autoWidth / merge / rtl, it works fine. What do you think?

[virajsoni06]

Hi @gyx8899,
Thanks for solving this. I was also facing similar issue. Got it sorted now.

[pascalporedda]

Hey sorry for not replying but there were alot of other things todo besides this open source project.

Since I got some time from my company for this project, I will take care of some issues regarding the Owl Carousel.

We'll when I include and test this into one of the upcoming releases.

[krishhnaa]

I want to use the loop false and when I used loop:false i am seeing lot of white gap to left.

[gyx8899]

@krishhnaa
I have a custom owl.carousel.custom.js file with above fix code.

This is my test page, and click #4 in test page to apply the custom file.
https://gyx8899.github.io/YX-JS-ToolKit/owlCarousel2/owl-autoWidth.html

You can have a try.

[krishhnaa]

@gyx8899 I am facing an issue right now with the owl carousel. When I am swiping the carousel on mobile (iphone) the entire page is moving. Have you faced the same issue before?

[gyx8899]

@krishhnaa
No, I have not faced. You can paste your demo link and I could have a try.

[robizzt]

In v2.3.4 there is still gap between last item and the right edge of the container.
I updated v2.3.4 with @gyx8899 code and it's working. I don't know about other "fixes", but I also copied them in new version.

Here is the file (remember to change file extension):
owl.carousel.custom-2.3.4.txt

[gyx8899]

owl 2.3.4 have not fixed this bug.

But my fixed code still can work.
Just below: Insert between line:1215 and line:1216 in owl.carousel.js-2.3.4

// Custom change : #1 Fixed the last item space to the right when set autoWith with true;
// Custom change : #1 Re-fixed last item space to right when all items width small than the container width;
// Custom change : #4 Fixed items scrolled left even when items width small than container width;
var settings = this.settings,
        iterator = this._items.length,
        itemsWidthSum = this._items[--iterator].width(),
        elementWidth = this.$element.width(),
        accommodate = true;

while (iterator--) {
    itemsWidthSum += this._items[iterator].width() + this.settings.margin;
    if (itemsWidthSum > elementWidth) {
        accommodate = false;
        break;
    }
}

if (accommodate)
{
    // Custom change : #4 Fixed if items width small than container width, reset coordinate with 0;
    coordinate = 0;
}
else
{
    // Custom change : #3 Fixed with the case of iterator(this._items.length) == 0;
    if ((settings.autoWidth || settings.merge)
            && !settings.loop
            && iterator > 0 && position > 0
            && position > iterator) {
        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);
    }
}

Dome updated

[romkamix]

owl 2.3.4 have not fixed this bug.

But my fixed code still can work.
Just below: Insert between line:1215 and line:1216 in owl.carousel.js-2.3.4

// Custom change : #1 Fixed the last item space to the right when set autoWith with true;
// Custom change : #1 Re-fixed last item space to right when all items width small than the container width;
// Custom change : #4 Fixed items scrolled left even when items width small than container width;
var settings = this.settings,
      iterator = this._items.length,
      itemsWidthSum = this._items[--iterator].width(),
      elementWidth = this.$element.width(),
      accommodate = true;

while (iterator--) {
  itemsWidthSum += this._items[iterator].width() + this.settings.margin;
  if (itemsWidthSum > elementWidth) {
      accommodate = false;
      break;
  }
}

if (accommodate)
{
  // Custom change : #4 Fixed if items width small than container width, reset coordinate with 0;
  coordinate = 0;
}
else
{
  // Custom change : #3 Fixed with the case of iterator(this._items.length) == 0;
  if ((settings.autoWidth || settings.merge)
          && !settings.loop
          && iterator > 0 && position > 0
          && position > iterator) {
      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);
  }
}

Dome updated

Perfect solution! Thank you.
But for me not working with 2 items.
I change code to "iterator >= 0":

// Custom change : #3 Fixed with the case of iterator(this._items.length) == 0;
if ((settings.autoWidth || settings.merge)
&& !settings.loop
&& iterator >= 0 && position > 0
&& position > iterator) {

Can you explain?

[adirkandel]

@krishhnaa
I have a custom owl.carousel.custom.js file with above fix code.

This is my test page, and click #4 in test page to apply the custom file.
https://gyx8899.github.io/YX-JS-ToolKit/owlCarousel2/owl-autoWidth.html

You can have a try.

@gyx8899 Rocks!