Owlcarousel2: The responsive function doesn't work when i set with autowidth(true) and loop(false)

[gyx8899]

It is ok in owl.carousel.2.0.0-beta.2.4;
JSFiddle Link: https://jsfiddle.net/JSDavi/7z1th3cx/

But it doesn't work in this new version of owl.carousel.2.1.0;
JSFiddle Link: https://jsfiddle.net/JSDavi/rtvc5exr/

Even in owl.carousel.2.1.4, it doesn't work;
JSFiddle Link: https://jsfiddle.net/JSDavi/cotyqt6x/1/

Also in owl.carousel.2.1.5, it doesn't work;
JSFiddle Link: https://jsfiddle.net/JSDavi/689q9zLd/

What I care is that I can't scroll to the last item.

Thanks.

[kddc]

+1 on that one

[hellor0bot]

+1

[hellor0bot]

Is there a change someone could fix it?

[pascalporedda]

I will look further into this in the next few days.

Stay tuned.

[hellor0bot]

Thanks, @CracyCrazz. Please also see #1431.

[hellor0bot]

Any updates on this one?

[pascalporedda]

I haven't looked into it yet, I will do this in my spare time on the weekend.

I should get this fixed then.

[pascalporedda]

To give you guys an update. I've looked into this further, but I yet can't give you an solution for this problem.

It seems to be an issue with the visibility check of the current slide.

[hellor0bot]

@cracyCrazz, too bad. Maybe someone else could help.

[gyx8899]

@CracyCrazz , have you ever compared with "owl.carousel.2.0.0-beta.2.4"?

[pascalporedda]

Silly me. I didn't, no.. But I will.. later this day.

I give you an update then.

[hellor0bot]

Any updates?

[pascalporedda]

I've looked further into this, but yet have no clue. The difference between the two versions are kinda huge.

I'am just clueless.

If someone finds an fix for this, feel free to submit a pull request.

[gyx8899]

Hi @CracyCrazz @hellor0bot @kddc, i find the difference in my case between version "2.0.0-beta.2.4" and "2.1.X".
The difference is in the prototype function maximum.

In my case, i set autoWith-true and loop-false(center default false).

When i get the this.maximum():

This will be easily tested when we add breakpoint in if (settings.loop).
JSFiddle Link: https://jsfiddle.net/JSDavi/7z1th3cx/ (owl.carousel.2.0.0-beta.2.4)
JSFiddle Link: https://jsfiddle.net/JSDavi/689q9zLd/ (owl.carousel.2.1.5)

Owl.prototype.maximum(owl.carousel.2.0.0-beta.2.4)

It steps into else if (!settings.loop && !settings.center),
and then maximum = this._items.length - settings.items;

In this condition, when i add the setting of responsive in different sections, it will meet my requirements of "few items may be auto width in sometime";

Owl.prototype.maximum(owl.carousel.2.1.5)

It steps into else if (settings.autoWidth || settings.merge) {,
and then // binary search ...;
This maximum could not match the requirement of "sroll to the last item";

I think that if the property items value is not 1(autowidth:true), there should be a dynamic items, or remove the function of auto-attach-left.
And sequence of this 'if-else' condition should be tested in deep.

Prototype maximum (2.0.0-beta.2.4):

Owl.prototype.maximum = function(relative) {
    var maximum, width, i = 0, coordinate,
        settings = this.settings;

    if (relative) {
        return this._items.length - 1;
    }

    if (!settings.loop && settings.center) {
        maximum = this._items.length - 1;
    } else if (!settings.loop && !settings.center) {
        maximum = this._items.length - settings.items;
    } else if (settings.loop || settings.center) {
        maximum = this._items.length + settings.items;
    } else if (settings.autoWidth || settings.merge) {
        revert = settings.rtl ? 1 : -1;
        width = this.$stage.width() - this.$element.width();
        while (coordinate = this.coordinates(i)) {
            if (coordinate * revert >= width) {
                break;
            }
            maximum = ++i;
        }
    } else {
        throw 'Can not detect maximum absolute position.'
    }

    return maximum;
};

Prototype maximum (2.1.5):

Owl.prototype.maximum = function(relative) {
    var settings = this.settings,
        maximum = this._coordinates.length,
        boundary = Math.abs(this._coordinates[maximum - 1]) - this._width,
        i = -1, j;

    if (settings.loop) {
        maximum = this._clones.length / 2 + this._items.length - 1;
    } else if (settings.autoWidth || settings.merge) {
        // binary search
        while (maximum - i > 1) {
            Math.abs(this._coordinates[j = maximum + i >> 1]) < boundary
                ? i = j : maximum = j;
        }
    } else if (settings.center) {
        maximum = this._items.length - 1;
    } else {
        maximum = this._items.length - settings.items;
    }

    if (relative) {
        maximum -= this._clones.length / 2;
    }

    return Math.max(maximum, 0);
};

[hellor0bot]

@gyx8899 There's definately something wrong with the else if (settings.autoWidth || settings.merge). However I'm too stupid to figure it out.

[pascalporedda]

Thank you @gyx8899. If i change the new code to the old one, it works like a charm.

Now that I got the point where it wents wrong I will take a closer look, and might figure out what is going on.

[pascalporedda]

I've got a workaround now. I will commit this into a hotfix branch later, and distribute it somewhen on the weekend with a few other fixes.

[gyx8899]

Hi @CracyCrazz ,

I have tried with this workaround in my demo, and found that it could not step into while (coordinate = this.coordinates(i)){ ... }.
The value of i inited with '-1', and then coordinate === 0.
So the (coordinate = this.coordinates(i)) is false.
The result would be always maximum = this._coordinates.length.

Please have a check about this. Thanks.

while (coordinate = this.coordinates(i)) {
    if (coordinate * revert >= width) {
        break;
    }
    maximum = ++i;
}

[pascalporedda]

Take a look at this fiddle:

https://jsfiddle.net/689q9zLd/5/

For me it is now working, prove me wrong, but I didn't really changed anything just two little things.

[hellor0bot]

@CracyCrazz, @gyx8899 thanks for the contribution.

However one thing that bothers me so much. In the latest Owl version, there's no whitespace after the last slide and it's really cool. The carousel shall stop when the last slide becomes visible, not when the last slide is on the left of the viewport. In your solutions there's the whitespace, and it makes me sad.

[gyx8899]

@hellor0bot
I also know this.
There is something we could do in computing the maximum.

[gyx8899]

Hi @CracyCrazz @hellor0bot ,

I have tried to replace some code. And it satisfies me, and your advices?
JSFiddle : https://jsfiddle.net/JSDavi/689q9zLd/6/

@hellor0bot I think it is acceptable of last item's right whitespace(the whitespace's width less than the width of item which is the first visible item's left item), because there is a mechanism of "First visible item attach to the left".

Below is the changes in else if (settings.autoWidth || settings.merge) {

if (!settings.loop){
    //revert = settings.rtl ? 1 : -1;
    //width = this.$stage.width() - this.$element.width();
    //while (coordinate = this.coordinates(i)) {
    //  if (coordinate * revert >= width) {
    //      break;
    //  }
    //  maximum = ++i;
    //}
    var iterator = this._items.length,
            itemsWidth = 0;
    while (iterator--) {
        itemsWidth += this._items[iterator].width();
        if (itemsWidth >= this.$element.width()) {
            break;
        }
    }
    maximum = iterator + 1;
} else {
    ...

[hellor0bot]

@gyx8899, could you please post the whole Owl.prototype.maximum? Can't figure out where to paste your latest fix.

[gyx8899]

OK! @hellor0bot

Owl.prototype.maximum = function(relative) {
    var settings = this.settings,
        maximum = this._coordinates.length,
        boundary = Math.abs(this._coordinates[maximum - 1]) - this._width,
        i = -1, j,
        revert,
        width,
        coordinate;

    if (settings.loop) {
        maximum = this._clones.length / 2 + this._items.length - 1;
    } else if (settings.autoWidth || settings.merge) {
        var iterator = this._items.length,
            itemsWidth = 0;
        while (iterator--) {
            itemsWidth += this._items[iterator].width();
            if (itemsWidth > this.$element.width()) {
                break;
            }
        }
        maximum = iterator + 1;
    } else if (settings.center) {
        maximum = this._items.length - 1;
    } else {
        maximum = this._items.length - settings.items;
    }

    if (relative) {
        maximum -= this._clones.length / 2;
    }

    return Math.max(maximum, 0);
};

[hellor0bot]

@gyx8899 can't believe it but the issue's been fixed. Thanks so much! Can you please PR it so it'll hopefully be included in the next release?

[gyx8899]

@hellor0bot @CracyCrazz
I just test it with my demo page, there should be some other tests.
@CracyCrazz Could you test it from the whole project? And we expect the fixed release. Thanks.

[hellor0bot]

@gyx8899 seems to be working when I'm using display: flex on .owl-stage. So indeed it needs more tests.

[pascalporedda]

I will test this for the whole project, it will be released with a new version 2.2 probably, because there are some general things to discuss about the whole project.

I will release the workaround with the whitespace in the next hotfix, so it will be at least somehow accessible

Tank you @gyx8899 for figuring this out, if you want to create a pull request for this.

[hellor0bot]

@CracyCrazz, @gyx8899 thanks for addressing this issue, however I'm still experiencing the extra white space. See the Fiddle. It shall stop after slide No. 10, because the last three slides fit into the viewport. Funny thing, there's no such issue, when we set a margin though: margin: 1 will do.

[gyx8899]

@CracyCrazz @hellor0bot
About @hellor0bot JSFiddle demo

Fiddle. It shall stop after slide No. 10, because the last three slides fit into the viewport. Funny thing, there's no such issue, when we set a margin though: margin: 1 will do

It will be ok, just only change from '>=' to '>' of this 'if' condition.
(And sorry, it is my fault.)

while (iterator--) {
    itemsWidth += this._items[iterator].width();
    if (itemsWidth > this.$element.width()) {
        break;
    }
}

And after modify, this is the new Fiddle which meet your feathure.
https://jsfiddle.net/JSDavi/cotyqt6x/6/

[hellor0bot]

Oh, @gyx8899, thank you so much. It's perfect now! I'm super happy. Looking forward to the new release or a hotfix to be able to pull it with Bower.

[gyx8899]

Hi @CracyCrazz @hellor0bot ,
I have tried many times, and optimized it with its margin width. You could have a check if you are free.

Owl.prototype.maximum = function(relative) {
    var settings = this.settings,
        maximum = this._coordinates.length,
        boundary = Math.abs(this._coordinates[maximum - 1]) - this._width,
        i = -1, j;

    if (settings.loop) {
        maximum = this._clones.length / 2 + this._items.length - 1;
    } else if (settings.autoWidth || settings.merge) {
        var 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;
            }
        }
        maximum = iterator + 1;
    } else if (settings.center) {
        maximum = this._items.length - 1;
    } else {
        maximum = this._items.length - settings.items;
    }

    if (relative) {
        maximum -= this._clones.length / 2;
    }

    return Math.max(maximum, 0);
};

[hellor0bot]

@gyx8899 not working in my project. Seems it doesn't take into account merge, which I'm using. Can you check it with the Fiddle please?

[gyx8899]

@hellor0bot It works event when you don't set the margin value.
Please check this JSFiddle

[hellor0bot]

@gyx8899 I can't reach slides 11 and 12 in your Fiddle.

[gyx8899]

@hellor0bot
Sorry about this, i fixed it with removing the condition of if (settings.autoWidth), and it worked again.
This is the new JSFiddle.

[hellor0bot]

@gyx8899 seems to be working fine. However I see you dropped the if (!settings.loop) condition. Not sure if it's really needed. Just to point out.

Many thanks. Looking forward to the fix in a Bower release.

[pascalporedda]

@gyx8899 I want to merge and commit your changes today. You just edited the maximum function, right? And your latest version can be found in your most recent JSFiddle?

[gyx8899]

@CracyCrazz
Yes, i just edited the maximum function, and only in the inner of else if (settings.autoWidth || settings.merge) {.
(In my most recent JSFiddle)

Just below :

...
} else if (settings.autoWidth || settings.merge) {
    var 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;
        }
    }
    maximum = iterator + 1;
} else if (settings.center) {
...

I am also looking forward this new release.

[pascalporedda]

Alright. So far as I've tested it, it seems to be working fine for me. I had to move the var declaration, due to the coding standard, but that's all that needed to be changed.

I will look into a few more issues and see if I can get a quick for some of them.

[pascalporedda]

The changes are now available in version 2.1.6. I will close this issue. If you notice any errors feel free to submit them.

[elgreatly]

i still have this issue in version 2.3.4 the responsive not working with autowidth attribute

[helloromero]

Responsive still isn't working in 2.3.4

[VaLeXaR]

Not working in 2.3.4.

[Emsi90]

Propably you have problem with width in style.
You have to use on container e.g. width: 100% and max-width: 1140px;

[RMJuanRuiz]

Same problem, not working in 2.3.4