如果响应项目 > 项目总数，请将 owl-轮播循环设置为 false？

Question

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

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

这是我当前的 owl 轮播初始化设置。

    <script>


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

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

</script>

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

Answer 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>

如果响应项目 > 项目总数，请将 owl-轮播循环设置为 false？

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

javascript

dynamic

owl-carousel