Question

我有一个猫头鹰轮播的问题，我在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>

但是导航器会在一列中显示数字，没有格式。我把所有的猫头鹰旋转木马放在正确的文件夹中。问题出在哪？

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

感谢所有回复

Answer 1

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

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#owl-example").owlCarousel();
});
</script>

Answer 2

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

猫头鹰 - 旋转木马没有显示任何东西

2 个答案: