添加两个Owl Carousel后JQuery脚本需点击才生效问题

嘿，我一眼就瞅出问题所在了！你遇到的“需要点击div才运行”的问题，本质是重复使用同一个变量操作轮播、重复初始化组件导致的实例冲突，而且事件绑定的上下文也不对。

具体来说：

• 你两次用var owl = $('.owl-carousel')然后重复调用owlCarousel()，这会把所有.owl-carousel元素反复初始化，直接打乱了组件的内部状态。
• 鼠标滚轮事件只绑在了第一个owl变量对应的元素上，第二个轮播（.owl-carousel-res）没绑定这个事件，而且重复绑定的事件会干扰正常触发逻辑，导致必须点击才能激活。

修复后的完整代码 #

我给每个轮播实例分配了独立变量，分开初始化和事件绑定，这样就不会互相干扰了：

$(document).ready(function() {
    // 处理第一个轮播：.owl-carousel
    var mainCarousel = $('.owl-carousel');
    mainCarousel.owlCarousel({
        loop: true,
        nav: true,
        margin: 10,
        responsive: {
            0: { items: 1 },
            600: { items: 3 },
            960: { items: 5 },
            1200: { items: 6 }
        }
    });

    // 给第一个轮播绑定鼠标滚轮控制
    mainCarousel.on('mousewheel', '.owl-stage', function(e) {
        if (e.deltaY > 0) {
            mainCarousel.trigger('next.owl');
        } else {
            mainCarousel.trigger('prev.owl');
        }
        e.preventDefault();
    });

    // 处理第二个轮播：.owl-carousel-res
    var resCarousel = $('.owl-carousel-res');
    resCarousel.owlCarousel({
        loop: true,
        margin: 10,
        responsiveClass: true,
        responsive: {
            0: { items: 1, nav: true },
            600: { items: 3, nav: false },
            1000: { items: 6, nav: true, loop: true, margin: 20 }
        }
    });

    // 如果第二个轮播也需要鼠标滚轮控制，取消下面的注释即可
    /*
    resCarousel.on('mousewheel', '.owl-stage', function(e) {
        if (e.deltaY > 0) {
            resCarousel.trigger('next.owl');
        } else {
            resCarousel.trigger('prev.owl');
        }
        e.preventDefault();
    });
    */
});

核心修复点 #

• 独立变量区分实例：用mainCarousel和resCarousel分别指代两个轮播，避免变量覆盖和重复操作同一选择器。
• 单次初始化：每个轮播只初始化一次，再也不会出现重复初始化导致的状态混乱。
• 事件绑定精准：每个轮播的鼠标滚轮事件只绑定到自己的实例上，确保操作的是当前轮播，不会互相干扰。
• 按需启用功能：第二个轮播的滚轮功能可以按需开启，灵活度更高。

这样修改后，两个轮播都会正常加载运行，不需要点击div就能直接工作啦！

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