0

我正在尝试将 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>

任何帮助将不胜感激。

4

2 回答 2

1

<head>在你的部分添加这个 css 。

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

玩得开心..！！

于 2015-07-13T12:45:21.677 回答
0

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

<script src="assets/owl-carousel/owl.carousel.js"></script>
于 2014-04-21T18:10:42.253 回答