owl-carouselはアイテムを表示しません

Question

owl-carouselには前と次のボタンだけが表示されますが、私はowl-carouselに追加する項目は決して表示されません（常に表示：なし） これは私の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

あなたは忘れてしまったと思います。owl-carouselのcssとjsファイルを追加してください。

フクロウカルーセルCSSを追加し、jsのあなたが質問やowlcarousel cssファイルにjqueryを含まなかった

<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

を提出してください。それらのファイルをあなたのコードに含めて、問題を解決します。下記のコードをご覧ください。

$('.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>前）<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> 

を追加します。