如果响应项目 > 项目总数，将 owl-carousel 循环设置为 false？答案

【问题标题】：set owl-carousel loop to false if responsive items > total item count?如果响应项目 > 项目总数，将 owl-carousel 循环设置为 false？
【发布时间】：2020-11-24 21:48:39
【问题描述】：

我在 HTML 中为我的 owl carousel 动态生成许多项目（我们称之为 myItemCount），所以这个数字可能会有所不同。 owl carousel 使用响应式设置根据屏幕宽度设置许多项目。但有时我的实际项目数量 (myItemCount) 小于我的响应标准允许的数量。在这些情况下，我希望循环为假，因为多个克隆将同时可见。我无法在初始化之前决定是否要循环，因为这取决于响应设置允许的项目数与 myItemCount 之间的差异。

我想做一些事情，比如在响应式设置之后放置一个 if 语句 if (myItemCount < items) { items: myItemCount, loop: false, responsiveClass: false } 以防止循环并防止响应式设置设置新的项目数量。这是如何实现的？

这是我当前的猫头鹰轮播初始化设置。

    <script>


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

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

</script>

我知道这与很多问题相似，但我无法找到答案何时它是动态项目数和响应式项目数的组合。

【问题讨论】：

标签： javascript dynamic owl-carousel

【解决方案1】：

终于找到了我自己的解决方案，似乎可行。所以这可能是任何人都应该知道的，但是是的.. 您可以使用可调用对象来设置选项中的值，从而通过调用响应选项中的 getLoop() 和 getItems() 函数来计算当前值项目编号高于 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>

【讨论】：