如何为小于768px的屏幕禁用Owl Carousel的loop:true

要解决iPhone滑动时的崩溃问题，我们可以通过响应式配置针对不同屏幕尺寸设置loop参数：当屏幕宽度小于768px时关闭循环（loop: false），大于等于768px时开启循环（loop: true）。

修改后的完整代码如下：

$(document).ready(function() {
    $('.my-carousel').owlCarousel({
        items: 1, 
        loop: true, // 默认开启循环，针对大屏幕
        center:true, 
        margin:10, 
        URLhashListener:true,
        autoplayHoverPause: false,
        startPosition: 'URLHash',
        navText : ["<p><small>Prev</small> and <small>Next</small></p>"],
        responsive:{
            0:{
                items:1,
                loop: false // 屏幕宽度<768px时关闭循环
            },
            768:{
                items:1,
                loop: true // 屏幕宽度≥768px时开启循环
            }
        }   
    });
})

关键改动说明： #

• 移除了重复的items: 1和autoplayHoverPause配置，精简代码结构
• 在responsive配置中新增768px断点，明确区分移动端与桌面端的循环行为
• 在0-767px的断点内设置loop: false，解决iPhone滑动崩溃问题
• 保留默认loop: true作为桌面端的默认行为

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