每個「幻燈片」上具有響應列的傳送帶不會轉到下一張幻燈片

Question

我試圖通過輪播方式顯示此業務的評論，每張幻燈片在大中屏幕上顯示3條評論，但只有一條顯示在小屏幕

對於每一個審查，將有它的頂部和評論下面的評論（上帝，我希望這是有道理的）。

所以每張幻燈片都會顯示3條評論，下一張幻燈片會顯示3條評論，等等等等。但在手機屏幕上，它只會顯示一條評論。

我在illustrator上製作了一張svg圖片，併爲每張圖片輸入了它的源代碼。

問題：

轉盤不會去下一張幻燈片，當我點擊它。我知道我有正確的插件B/C在同一頁上有另一個旋轉木馬，它功能齊全。

P.S.如果我的想法是愚蠢的，你有更好的想法如何顯示評論請分享。這些評論不在谷歌或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"> 

在你的問題，你也想知道，如果你只能顯示在一條評論與本機引導轉盤一起移動的時間。不幸的是，我所知道的bootstrap旋轉木馬不可能。它將一次顯示3個，但它們將處於屏幕的整個寬度，因此它將循環顯示跨越屏幕寬度的所有3個評論。我想如果你想使用原生bootstrap旋轉木馬，你只能在每張幻燈片中顯示3條評論中的一條，但是你不會看到其他2條評論，或者你可以寫出2條不同的旋轉木馬，只顯示一條更大屏幕和一個小屏幕上顯示：無CSS屬性在所需的寬度。然後，如果您想讓它們根據屏幕大小自動滑動，則一次只能激活一次，但這需要一些額外的jQuery腳本。

大概你最好的選擇是看看像Owl Carousel這樣的第三方輪播，它可以讓你在javascript中設置你想要以不同屏幕尺寸顯示的評論數量。

這是一個即插即用的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鏈接的路徑。

無論如何希望這有助於。