set owl-carousel loop to false if responsive items > total item count?

Question

I am dynamically generating a number of items (let's call it myItemCount) in HTML for my owl carousel, so this number can vary. The owl carousel sets a number of items depending on screen width with the responsive setting. But sometimes my actual number of items (myItemCount) is smaller than the number allowed by my responsive criteria. In these cases I want loop to be false because several clones will be visible simultaneously. I can't decide before initializing if I want it to loop or not because it depends on the difference between the number of items allowed by the responsive setting and myItemCount.

I'd like to do something like putting an if-statement after the responsive setting saying if (myItemCount < items) { items: myItemCount, loop: false, responsiveClass: false } to prevent looping and prevent that a new number of items is being set by the responsive setting. How could this be achieved?

Here is my current settings for the initialization of the owl carousel.

    <script>


    $(".newslider").owlCarousel({
        autoplay: true,
        loop: true,
        responsiveClass: true,

        responsive: {
            0: {
                items: 2
            },
            460: {
                items: 3,
            },
            1000: {
                items: 4
            },
        },
    });

</script>

I know this is similar to a lot of questions, but I haven't been able to find an answer to when it's a combination of both a dynamic number of items and a responsive number of items.

Answer 1

Finally found my own solution which seems to work. So this might be something anyone should know, but yeah.. You can use callables to set the values in options and thus calculate the value on the fly by calling getLoop() and getItems() functions from the responsive option which checks if the current item number is higher than myItemCount:

    <script>


    // var myItemCount is previously defined

    $(".newslider");.owlCarousel({
        autoplay: true,
        loop: true,
        responsiveClass: true,

        responsive: {

            0: {
                items: getItems(2),
                loop: getLoop(2)
            },

            460: {
                items: getItems(3),
                loop: getLoop(3)
            },

            1000: {
                items: getItems(4),
                loop: getLoop(4)
            },

        },
    });


    function getItems(items) {
        if (myItemCount < items) {
            return myItemCount;
        }
        else {
            return items;
        }
    }


    function getLoop(items) {
        if (myItemCount < items) {
            return false;
        }
        else {
            return true;
        }
    }

</script>