Question

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

以下是我正在使用的代码：

<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>

非常感谢任何帮助。

Answer 1

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

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

Answer 2

在<head>部分添加此css。

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

在上面</body>

中添加此JS

<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 个答案: