Owlcarousel2: Carousel duplicating single item

[kprovance]

FIrst, here is my JS:

        $(".related_posts_con").owlCarousel({
            smartSpeed : 900,
            autoplay : true,
            lazyLoad: true,
            autoplayTimeout: 3000,
            autoHeight : true,
            responsive: {
                0:{
                    items: 1
                },
                450: {
                    items: 2
                },
                600: {
                    items: 2
                },
                700: {
                    items: 3
                },
                1000: {
                    items: 3
                },
                1200: {
                    items: 4
                },
                1400: {
                    items: 4
                },
                1600: {
                    items: 5
                }
            },
            autoplayHoverPause : true,
            loop: true,
            nav : true,
            dots : false,
            mouseDrag: true,

            navText : [
                "<span class='req_owl_p'><i class='fa fa-angle-left'></i></span>",
                "<span class='req_owl_n'><i class='fa fa-angle-right'></i></span>"]
        });

Here is the issue I've come across: This is a post slider for a WordPress blog, which obviously displays a carousel of related posts. The carousel shows the number of items based on the responsive settings above. With the preview beta version, 2.4 I think it was, if there was only a few posts, the carousel would simply display the one or two posts available. With the 2.1.6, let's say I have only one post, it displays a carousel full of that same post. I'd rather not do that, it's redundant. I read the docs page, but see no way to prevent this from happening. Is there a way to disable the carousel from duplicating one of two items to fill itself out?

Also, WHY did you remove the 'owl-controls' div class? Ugh! That messed me up with all kind of CSS. Backward compatibility, guys! ;-)

[pascalporedda]

(Sorry about the canned reply.)

Please add a link to a page where I can verify this error. You can use a service like jsfiddle, plnkr, jsbin or codepen.

And make sure you're using the latest Owl Version!

[kprovance]

Well, it's a WordPress site, it's not something I can simply put on jsfiddle, since it uses WordPress APIs and databases, etc. The URL is here: http://www.requitedesigns.com/blog/welcome-requite-designs/ (scroll down to Related Posts).

I pulled the 1.2.6 from the git yesterday before reporting.

Let me see if I can use one of the demos on jsfiddle to recreate. Will post back.

[kprovance]

Okay, here you go. It ain't pretty, but you can see where the one item is entered multiple times.

https://jsfiddle.net/kprovance/52g5om4b/7/

[kprovance]

Even if you take the response array out, same thing happens. Just checked. https://jsfiddle.net/kprovance/52g5om4b/8/

[lautaromss]

This doesn't look like a bug to me at all. You have the 'loop' option set to true so the carousel duplicated all items infinitely (in this case only one item) to achieve this loop effect. This is the intended purpose and functionality of the loop option.

Addressing your problem:

If you don't want items to be duplicated, desactivate the loop effect and they will not be duplicated. If you want the loop to only be active when you have, say, 4 or more items... well you said you are using WordPress, so you should use PHP to dynamically count how many items you are going to render and then set the loop option to true or false according to that calculation. This should be possible even if you are getting the items from metadata from your WordPress database.

This is intended feature as I see it, am I wrong?

[damirkoch]

We have received your feature request and will evaluate the implementation of this.

I can't give you an estimated date when or if this will be integrated into the project. This might happen when the main refactoring will take place.