1

我有一个猫头鹰轮播的问题，我在 HTML 文件中添加了这段代码：

<html>
<head>
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css"
    <!--  jQuery 1.7+  -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Include js plugin -->
    <script src="owl-carousel/owl.carousel.js"></script> 
</head>
<body>
    <div id="owl-demo" class="owl-carousel owl-theme">  
        <div class="item"><h1>1</h1></div>
        <div class="item"><h1>2</h1></div>
        <div class="item"><h1>3</h1></div>
        <div class="item"><h1>4</h1></div>
        <div class="item"><h1>5</h1></div>
        <div class="item"><h1>6</h1></div>
        <div class="item"><h1>7</h1></div>
        <div class="item"><h1>8</h1></div>
        <div class="item"><h1>9</h1></div>
        <div class="item"><h1>10</h1></div>
        <div class="item"><h1>11</h1></div>
        <div class="item"><h1>12</h1></div>
    </div>
</body>

但导航器向我显示一列中的数字，没有格式。我将所有猫头鹰轮播放在正确的文件夹中。哪个是问题？

导航器是谷歌浏览器，是最后一个版本。

感谢所有回复

4

2 回答 2

1

像这样简单的调用 OwlCarousel，它会起作用。

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#owl-example").owlCarousel();
});
</script>
于 2014-11-24T10:33:35.187 回答
0

调用 Owl 初始化函数，你的轮播就准备好了。

在标签前添加以下代码</body>：

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

  $("#owl-demo").owlCarousel();

});
</script>

或者：

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

      var owl = $("#owl-demo");

      owl.owlCarousel({
          items : 10, //10 items above 1000px browser width
          itemsDesktop : [1000,5], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
      });
    });
</script>
于 2014-09-11T07:37:13.807 回答