OwlCarousel如何在到达倒数第二项时禁止滚动到最后元素

首先需要关闭原配置中的loop循环模式，再通过监听轮播切换事件做边界控制即可实现需求，完整代码如下：

jQuery(document).ready(function() {
    const matchingCarousel = jQuery('#matching_carousel').owlCarousel({
        stagePadding: 80,
        loop: false, // 关闭循环模式才能固定边界
        margin: 20,
        items: 1,
        center: true,
        nav: false,
        mouseDrag: true, // 默认开启拖拽
        touchDrag: true, // 默认开启触摸滑动
        responsive:{
            0:    {stagePadding: 80},
            700:  {stagePadding: 120},
            1200: {stagePadding: 170},
        }
    });

    // 监听轮播切换事件
    matchingCarousel.on('changed.owl.carousel', function(event) {
        const owl = event.relatedTarget;
        const currentIndex = owl.relative(event.item.index); // 获取当前居中条目的相对索引
        const maxAllowIndex = owl.items().length - 2; // 最大允许居中的索引为倒数第二个
        
        if (currentIndex >= maxAllowIndex) {
            // 到达边界，禁用滑动、拖拽
            owl.options.mouseDrag = false;
            owl.options.touchDrag = false;
            // 如果后续开启了nav导航，可添加下面代码禁用下一步按钮
            // jQuery('.owl-next').addClass('disabled').off('click');
        } else {
            // 未到边界，恢复操作权限
            owl.options.mouseDrag = true;
            owl.options.touchDrag = true;
            // 如果后续开启了nav导航，可添加下面代码恢复下一步按钮
            // jQuery('.owl-next').removeClass('disabled').on('click', function() { matchingCarousel.trigger('next.owl.carousel') });
        }
    });
});

方案说明 #

• 上述代码会自动识别条目总数，最大可居中的条目固定为倒数第二个，最后一个条目始终只会通过stagePadding在右侧露出部分，符合你要的「存在更多后续内容」的视觉效果。
• 边界判断逻辑兼容所有响应式断点，不同屏幕尺寸下的stagePadding配置不会影响边界控制效果。
• 如果后续你调整了条目总数量，不需要手动修改索引数值，代码会自动计算对应边界。

内容的提问来源于stack exchange，提问作者tim