如何在Owl Carousel 2中为loop属性添加条件判断

需求：当产品列表条目数大于6时，开启Owl Carousel的loop循环；条目数≤6时关闭loop，同时禁用拖拽功能。

原代码的问题：

• 先初始化轮播但未设置loop相关配置，后续用refresh.owl.carousel事件传递配置的方式错误，该事件仅用于刷新布局，无法修改核心配置
• 初始化后才去统计.owl-item数量，虽然逻辑可行，但不如初始化前直接统计原始列表子元素高效

推荐方案：初始化前判断，一次性配置 #

直接在初始化轮播前获取条目数，根据数量动态生成配置项，逻辑更简洁高效：

$(".demo .product-list").each(function() {
    var categoryCollectionList = $(this);
    // 统计原始列表的条目数（避免依赖Owl生成的.owl-item节点）
    var itemCount = categoryCollectionList.children().length;
    var enableLoop = itemCount > 6;

    categoryCollectionList.addClass("owl-carousel");
    categoryCollectionList.owlCarousel({
        nav: true,
        dots: false,
        margin: 0,
        autoplay: false,
        autoplaySpeed: 3000,
        autoWidth: true,
        stagePadding: 30,
        // 动态绑定loop及拖拽属性
        loop: enableLoop,
        touchDrag: enableLoop,
        mouseDrag: enableLoop
    });
});

补充：特殊场景下先初始化再修改配置 #

如果因业务需求必须先初始化轮播，再调整配置，可以通过获取轮播实例修改参数后刷新：

$(".demo .product-list").each(function() {
    var categoryCollectionList = $(this);

    categoryCollectionList.addClass("owl-carousel");
    // 初始化并获取轮播实例
    var carouselInstance = categoryCollectionList.owlCarousel({
        nav: true,
        dots: false,
        margin: 0,
        autoplay: false,
        autoplaySpeed: 3000,
        autoWidth: true,
        stagePadding: 30
    }).data('owl.carousel');

    // 统计Owl生成的条目数
    var itemCount = categoryCollectionList.find('.owl-item').length;
    var enableLoop = itemCount > 6;

    // 修改配置参数
    carouselInstance.options.loop = enableLoop;
    carouselInstance.options.touchDrag = enableLoop;
    carouselInstance.options.mouseDrag = enableLoop;
    // 刷新轮播使配置生效
    carouselInstance.refresh();
});

内容的提问来源于stack exchange，提问作者Ramish Hassan Riaz