各「スライド」に対応する列のカルーセルは、次のスライドには移動しません。

Question

このビジネスのレビューをカルーセル方式で表示しようとしています。各スライドには大画面と中画面の3つのレビューが表示されます画面

各レビューのために、それの上に星の評価とそれの下のレビュー（私はこれが意味することを望む神）でしょう。

各スライドには3件のレビューが表示され、次のスライドには3件のレビューが表示されます。しかし、モバイル画面では1件のレビューしか表示されません。

私はイラストレーターでsvg画像として星を作って、それぞれの画像に対してそれにソースを入力しました。

問題：私はそれをクリックしたときに

カルーセルは、次のスライドに行くことはありません。私は右のプラグインを持っていることを知っている/ cは、同じページに別のカルーセルがあり、それは完全に機能しています。

P.S.私のアイデアが愚かで、あなたがレビューを表示する方法についてより良いアイデアを持っていれば、共有してください。レビューはgoogleやyelpではなく、私はすでにそのことについて話しており、顧客はオンラインでそれらを離れて代わりに表示するようにしています。あなたの最初のスライドに

<!--review slider --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
<!-- Carousel indicators --> 
<ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
</ol> 
<!-- Wrapper for carousel items --> 
<div class="carousel-inner"> 
    <div class="active"> 
    <div class="container"> 
     <!--<div class="row">--> 
     <div class="col-lg-4 col-md-4 col-sm-12"> 
    <img src="img/5star.svg" alt=""> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, asperiores, commodi culpa dolores ea harum inventore magnam optio repudiandae sunt veniam voluptate. Consectetur id inventore ipsa, sed vero voluptate?</p> 
     </div><!--end of col--> 

     <div class="col-lg-4 col-md-4 col-sm-12"> 
      <img src="img/5star.svg" alt=""> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, asperiores, commodi culpa dolores ea harum inventore magnam optio repudiandae sunt veniam voluptate. Consectetur id inventore ipsa, sed vero voluptate?</p> 
     </div><!--end of col--> 

     <div class="col-lg-4 col-md-4 col-sm-12"> 
      <img src="img/5star.svg" alt=""> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, asperiores, commodi culpa dolores ea harum inventore magnam optio repudiandae sunt veniam voluptate. Consectetur id inventore ipsa, sed vero voluptate?</p> 
     </div><!--end of col--> 

     <!-- </div> end of row--> 
    </div> <!--end of container--> 
    </div> <!--closing of the active class--> 
    <div class="item"> 
    <div class="container"> 
     <!--<div class="row">--> 
     <div class="col-lg-4 col-md-4 col-sm-12"> 
     <img src="img/5star.svg" alt=""> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, asperiores, commodi culpa dolores ea harum inventore magnam optio repudiandae sunt veniam voluptate. Consectetur id inventore ipsa, sed vero voluptate?</p> 
     </div><!--end of col--> 
     <div class="col-lg-4 col-md-4 col-sm-12"> 
     <img src="img/5star.svg" alt=""> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, asperiores, commodi culpa dolores ea harum inventore magnam optio repudiandae sunt veniam voluptate. Consectetur id inventore ipsa, sed vero voluptate?</p> 
     </div><!--end of col--> 
     <div class="col-lg-4 col-md-4 col-sm-12"> 
     <img src="img/5star.svg" alt=""> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, asperiores, commodi culpa dolores ea harum inventore magnam optio repudiandae sunt veniam voluptate. Consectetur id inventore ipsa, sed vero voluptate?</p> 
     </div><!--end of col--> 
     <!-- </div> end of row--> 
    </div> <!--end of container--> 
    </div> <!--closing of the item class--> 

</div><!--end of the carousel--> 

<!-- Carousel controls --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
</a> 

`

Answer 1

あなたはクラスactiveを持っているが、それはまた、クラスitemを持っている必要があります。だからあなたの最初のスライドのラッパーは、次のように記述する必要がありますし、それが動作するはずです：あなたの質問に

<div class="item active"> 

代わりの

<div class="active"> 

をあなたが唯一の1件のレビューを表示することができれば、あなたも知りたいと思いましたネイティブのブートストラップカルーセルとのモバイル時代の時間。残念ながら私の知ることができないブートストラップ・カルーセルがあります。一度に3つずつ表示されますが、画面の全幅になりますので、画面の幅にまたがる3つのレビューがすべて循環します。私はあなたがネイティブのブートストラップカルーセルを使いたいと思った場合、各スライドに3つのレビューのうちの1つしか表示できないが、他の2つのレビューは表示されないか、2つの異なるカルーセルを書き出して、画面と1つの小さな画面で、ディスプレイ：希望の幅でcssプロパティなし。画面サイズに応じて自動スライドさせたい場合は、一度に1つだけ有効にしますが、追加のjqueryスクリプトが必要になります。

Owl Carouselのようなサードパーティのカルーセルをチェックすると、さまざまな画面サイズで表示したいレビューの量をjavascriptで設定できます。

ここでは、owlカルーセルのためにプレイするプラグアンドプレイhtmlページです。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <title></title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" /> 

    <style> 
    /*this style is just for demo purposes*/ 
    .owl-carousel h4{ 
     text-align:center; 
     padding:40px; 
     margin:0; 
     background:#4DC7A0; 
     min-height:40px; 
     color:white; 
    } 
    </style> 

    </head> 
<body> 


<div class="owl-carousel owl-theme"> 
    <div><h4>1</h4></div> 
    <div><h4>2</h4></div> 
    <div><h4>3</h4></div> 
    <div><h4>4</h4></div> 
    <div><h4>5</h4></div> 
    <div><h4>6</h4></div> 
    <div><h4>7</h4></div> 
    <div><h4>8</h4></div> 
    <div><h4>9</h4></div> 
</div> 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.owl-carousel').owlCarousel({ 
     loop:true, 
     margin:10, 
     nav:true, 
     responsive:{ 
      0:{ 
       items:1 
      }, 
      768:{ 
       items:3 
      }, 
      1000:{ 
       items:5 
      } 
     } 
    }); 
}); 
</script> 
</body> 
</html> 

私はcdnファイルにリンクしていますので、何もせずにこれを見ることができます。しかし、私はフクロウのカルーセルファイルをダウンロードし、それらを解凍すると、必要なファイルはdistファイルに保存されます。プロジェクトに追加し、CSSとJavaScriptのリンクのパスを更新するだけです。

とにかくこれが役立つことを願っています。