不使用在线编辑器时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
        }
    }
  });
});