猫头鹰传送带从不显示项目

Question

我有一个猫头鹰旋转木马的问题，只显示上一页和下一页按钮，但我添加到猫头鹰传送带的项目从不显示（始终显示：无） 这是我的HTML代码

$(document).ready(function(){ 
$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
    autoplay:true, 
    autoplayTimeout:10000, 
    autoplayHoverPause:true, 
    responsive:{ 
     0:{ 
      items:1 
     }, 
     600:{ 
      items:3 
     }, 
     1000:{ 
      items:5 
     } 
    } 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section class="my-slide"> 
     <ul class="row owl-carousel owl-theme"> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 1</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 2</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 3</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 4</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 5</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 6</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 7</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 8</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 9</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 10</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 11</p></a></div></li> 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 12</p></a></div></li> 
     </ul> 
    </section> 

Answer 1

我觉得.owl轮播类需要放置在jQuery的初始化。请检查这个fiddle并让我知道。

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav:true, 
    autoplay:true, 
    autoplayTimeout:10000, 
    autoplayHoverPause:true, 
    responsive:{ 
     0:{ 
      items:1 
     }, 
     600:{ 
      items:3 
     }, 
     1000:{ 
      items:5 
     } 
    } 
    }); 

Answer 2

我想你已经忘了添加猫头鹰传送带css和js文件。

请新增猫头鹰传送带CSS和JS文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script> 

$('.owl-carousel').owlCarousel({ 
 
    loop:true, 
 
    margin:10, 
 
    nav:true, 
 
    autoplay:true, 
 
    autoplayTimeout:10000, 
 
    autoplayHoverPause:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:1 
 
     }, 
 
     600:{ 
 
      items:3 
 
     }, 
 
     1000:{ 
 
      items:5 
 
     } 
 
    } 
 
    });

\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css"> 
 

 

 

 
<section class="my-slide"> 
 
     <ul class="row owl-carousel owl-theme"> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="http://www.w3schools.com/css/trolltunga.jpg"><p>this is item 1</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="http://www.w3schools.com/css/trolltunga.jpg"><p>this is item 2</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="http://www.w3schools.com/css/trolltunga.jpg"><p>this is item 3</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 4</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 5</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 6</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 7</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg"><p>this is item 8</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 9</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 10</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 11</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 12</p></a></div></li> 
 
     </ul> 
 
    </section> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

Answer 3

你没有包含在问题jquery和owlcarousel css文件。包括这些文件到您的代码将解决问题。请参阅下面的代码。

$('.owl-carousel').owlCarousel({ 
 
    loop:true, 
 
    margin:10, 
 
    nav:true, 
 
    autoplay:true, 
 
    autoplayTimeout:10000, 
 
    autoplayHoverPause:true, 
 
    responsive:{ 
 
     0:{ 
 
      items:1 
 
     }, 
 
     600:{ 
 
      items:3 
 
     }, 
 
     1000:{ 
 
      items:5 
 
     } 
 
    } 
 
    });

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> 
 

 
<section class="my-slide"> 
 
     <ul class="row owl-carousel owl-theme"> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 1</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 2</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 3</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 4</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 5</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 6</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 7</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 8</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 9</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 10</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 11</p></a></div></li> 
 
     <li class="owl-item"><div class="item-cat"><a href="logIn.html"><i class="fa fa-facebook fa-2x"></i><p>this is item 12</p></a></div></li> 
 
     </ul> 
 
    </section>

Answer 4

你的.js是正确的。您只需将owl.carousel.min.css分为<head>和owl.carousel.js分成<body>标记。

在<head>标签添加这个

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 

。

然后，

上<body>标签的底部添加此

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> 

（</body>之前）。