Owlcarousel2: Large browser widths and center + autoWidth + loop:false results in the last item not being shown.

[ThisIsDallas]

I am running into an issue where my "next" nav button is being disabled before the last item is showing. This is only happening on large screen widths. If the screen is below a specific resolution, everything works fine.

You can see my example here: https://jsfiddle.net/08Lb4042/

This is also only happening when I use center + autoWidth + loop:false. For example:

$('.owl-carousel').owlCarousel({
    nav:true,
    center:true,
    navText: ['←','→'],
    autoWidth:true,
    dots: false,
    responsive:{
        0:{
            items:1
        },
        768:{
            items:1
        },
        1000:{
            items:3
        },
        1800:{
            items:3
        }
    }
})

[jan-l]

I'm having a similar problem, any fixes found for this already?

[ThisIsDallas]

I actually just ended up adding another slide at the end and setting it to "display: none;". That seemed to fix the issue for me but since it's not a code level change it might not universally fix the problem.

[rafaelcanical]

I found this bug too.

When I use center: true, autoWidth: true and loop: false. Not all dots appear and I can't drag to the rest of the items.

Here is an example of this error: https://jsfiddle.net/08Lb4042/5/
Does someone found a solution, I need it urgent. Thanks

[rafaelcanical]

@j4NZKUE @ThisIsDallas I think I may have found a solution.

On this line https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/dist/owl.carousel.js#L1035

Remove the settings.autoWidth leaving it like this:

} else if (settings.merge) {

This solved it for me

[andreiaiova]

@rafamds how did you extend the library to work in your project?

[rafaelcanical]

I did not extend it :/ I just change the main file for quick solution.