猫头鹰旋转木马无法加载答案

【问题标题】：Owl Carousel failing to load猫头鹰旋转木马无法加载
【发布时间】：2014-04-21 18:07:08
【问题描述】：

我正在尝试将 Owl Carousel 集成到我为朋友制作的引导站点中，但我似乎无法加载它。当我在 Firebug 中签出时，我收到一个错误，指出 .owlCarousel 不是一个函数。

这是我正在使用的代码：

<div class="container"> <a id="gallery"></a>
  <div class="row-fluid PageHead">
    <div class="span12">
      <h3>IMAGE GALLERY<span> <img src="images/underline.png" alt="______"></span></h3>
    </div>
  </div>


    <div id="owl-demo" class="owl-carousel">
    <div class="item"><img class="lazyOwl" data-src="images/bandphotos/DSCN0224.JPG" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
    <div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
    </div>

<script>
    $(document).ready(function() {

    $("#owl-demo").owlCarousel({
    items : 4,
    lazyLoad : true,
    navigation : true
    });

    });

</script>

</div>

任何帮助将不胜感激。

【问题讨论】：

你没有包含 Owl 代码，或者它依赖的东西。
除非我遗漏了什么，看起来您实际上并没有为此添加 .js 文件？你只是在调用函数
对不起，我忘了我在 index.html 的顶部添加了以下内容：

标签： jquery owl-carousel

【解决方案1】：

将此 CSS 添加到您的 <head> 部分。

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

在上面添加这个JS </body>

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

在<img>中添加这个类

<div class="item"><img class="owl-lazy" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>

玩得开心..!!

【讨论】：

【解决方案2】：

将此添加到您的页脚并仔细检查路径：

<script src="assets/owl-carousel/owl.carousel.js"></script>

【讨论】：