Owlcarousel2: Last item not fully reachable

[coder20938]

When there are too many pictures, the couple last pictures of the carousel are not displaying.
The last one displayed seems cut.

However, if we the browser is a lot wider, the pictures actually appear.

Here is an example:
http://codepen.io/anon/pen/sxrje

[witrin]

@coder20938 Checkout your example and play with the width a little bit. You'll only see the latest image completely when this won't produce any space to the right. That is how Bartosz has this defined I think. If you think this is wrong we should wait for his opinion.

[sawyerh]

@witrin Not sure if I'm understanding your comment (possibly since the example @coder20938 posted isn't working for me). Are you saying it's meant to be cutoff and never fully visible without dragging it like this?

http://jsbin.com/jukoyapu/7/edit

[witrin]

Yes the other possibility would be show to the last slide fully but with white space to the right. So you would have a slider which doesn't fill its stage. Or when you would use the right side of the last slide for alignment we would have a slider which has no correct position in this situation; the only option which should allow this would be freeDrag.

[sawyerh]

From a user experience standpoint, I think the ideal solution for when you reach the end of the carousel is to show the full last-slide and move the cutoff to the left side if necessary. Here's a quick mockup of what I mean:

[sawyerh]

One thing I forgot to mention, when the text or dot navigation is enabled and the last slide is cutoff, the carousel just seems like it's broken since it never moves to the last slide. This is the use-case I'm running into.

[witrin]

I think this would break the systematic for this configuration, also this is such an edgy case but cost too much time to implement and inflates the code. IMO the solution for this case would be just using freeDrag.

[witrin]

Or enable loop.

[witrin]

@sawyerh I'll leave this issue open maybe Bartosz think differently about this.

[baldwicc]

+1

[aaroncshearer]

+1

[smilledge]

+1, Anyone have a solution for this yet?

[theskillwithin]

+1

[theskillwithin]

using freedrag or loop is not a solution to this if the client does not want it to loop. freedrag doesn't work either it just lets you kinda while holding it down see that there is more but when u let go it will bounce back.

[dingo-d]

Same thing happens to me. Any news on a workaround?

[catalinciupitu]

The issue seems to be the "items" setting, aka "active" images. The carousel container must be wider enough to display the last active images. I manage to dynamically change this setting and seems to work for me. This is the code I used in my project:

var carousel = $(".carousel");

carousel.owlCarousel({
                items : 3,
                autoWidth: true,
                lazyLoad: true,
                nav : true,
                dots: false,
                margin: 1,
                navContainerClass: 'owl-buttons',
                navText:    ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"]
            });

carousel.on('initialized.owl.carousel resized.owl.carousel', function() {
                var carouselWidth = $(this).width();
                var owlInstance = $(this).data('owlCarousel');
                var imgsWidth = 0;
                $($(this).find('img').get().reverse()).each(function(i) {
                    imgsWidth += $(this).width();
                    if (imgsWidth > carouselWidth) {
                        owlInstance.settings.items = i ? i : 1;
                        $(this).trigger('refresh.owl.carousel');
                        return false;
                    }
                });                
            });

[YellowSmiley]

I found adding the following and removing margin definitions fixed it for me:

.owl-item {
        padding-left:10px;
        padding-right:10px;
    }

[gyx8899]

Fixed in #1419
And get the latest version will be ok!

[sweettimes]

+1

[pinolo1]

@sawyerh set the max width at carousel container for example 1280px or 960 and margin auto. It work for me.

[murph133]

@pinolo1 Your solution seems to work! Brilliant! Thank you.

[pascalporedda]

The related PR for this has been merged a while ago. I will close this issue.