为什么我的OwlCarousel2轮播Banner无法正常显示？

故障原因 #

你写的jQuery选择器存在语法逻辑错误：

• 无空格的$("#banner-area.owl-carousel")选择器，匹配规则是同时具备id="banner-area"和class="owl-carousel"属性的同一元素
• 但你的HTML结构中，owl-carousel类是#banner-area节点的子元素，和#banner-area不是同一个DOM节点，所以选择器匹配不到任何元素，轮播自然无法初始化。

你删除#banner-area选择器后直接匹配.owl-carousel，可以正确命中轮播容器，因此功能恢复。

修复方案（保留#banner-area id） #

只需要在两个选择器之间加空格，匹配#banner-area下的.owl-carousel子元素即可，修正后的初始化代码如下：

$(document).ready(function() {
    $("#banner-area .owl-carousel").owlCarousel( {
        dots: true,
        items: 1
    });
});

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