每个“幻灯片”上具有响应列的传送带不会转到下一张幻灯片

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链接的路径。

无论如何希望这有助于。