javascript - 不使用在线编辑器时 JS 不工作/加载

Question

我有一些代码可以在在线编辑器(jsfiddle/codepen/jsbin 等)上按预期工作，但是，一旦我将其从这些代码中取出并放到实时环境中 - 或者甚至是静态 index.html 文件，js 就不会'似乎正在加载。这意味着右侧的轮播模块未显示。你认为这与顶部的 css 顺序有关吗？

https://jsfiddle.net/tLqhsr5j/

未渲染的代码:

$(".owl-carousel").owlCarousel({
    items: 2,
    loop: true,
    margin: 10,
    navContainer: '#nav',
    navText: [
        '<i class="fa fa-angle-left"></i>',
        '<i class="fa fa-angle-right"></i>'
    ],
    responsive:{
        0:{
            items:1
        },
        767:{
            items:1,
            nav:true
        }
    }
});

如有任何帮助，我们将不胜感激!

Answer 1

准备好将其包装在文档中

$( document ).ready(function() {
    $(".owl-carousel").owlCarousel({
    items: 2,
    loop: true,
    margin: 10,
    navContainer: '#nav',
    navText: [
        '<i class="fa fa-angle-left"></i>',
        '<i class="fa fa-angle-right"></i>'
    ],
    responsive:{
        0:{
            items:1
        },
        767:{
            items:1,
            nav:true
        }
    }
  });
});