貓頭鷹傳送帶從不顯示項目

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>之前）。