Twitter bootstrap 旋转木马，每个旋转木马上都有响应柱；幻灯片“；韩元'；不要转到下一张幻灯片

我试图通过旋转木马的方式展示对这项业务的评论，每张幻灯片都会在大屏幕和中屏幕上显示3条评论，但在小屏幕上只显示一条

对于每一篇评论，上面都会有星级，下面是评论（上帝啊，我希望这是有意义的）

因此，每张幻灯片将显示3条评论，下一张幻灯片将显示3条评论，依此类推。但在手机屏幕上，它只会显示一条评论

我在illustrator上将星星制作成svg图像，并为每个图像输入源代码

问题：

当我单击旋转木马时，它不会转到下一张幻灯片。我知道我得到了正确的插件b/c有另一个旋转木马在同一页上，它是完全功能

另外，如果我的想法很愚蠢，而你对如何显示评论有更好的想法，请分享。这些评论不在谷歌或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>

Lorem ipsum dolor sit amet，奉献精英。流动性、不正当性、不正当性、不正当性、不正当性、不正当性和不正当性。我的发明者ipsa，sed vero voluptate

Lorem ipsum dolor sit amet，奉献精英。流动性、不正当性、不正当性、不正当性、不正当性、不正当性和不正当性。我的发明者ipsa，sed vero voluptate

Lorem ipsum dolor sit amet，奉献精英。流动性、不正当性、不正当性、不正当性、不正当性、不正当性和不正当性。我的发明者ipsa，sed vero voluptate

Lorem ipsum dolor sit amet，奉献精英。流动性、不正当性、不正当性、不正当性、不正当性、不正当性和不正当性。我的发明者ipsa，sed vero voluptate

Lorem ipsum dolor sit amet，奉献精英。流动性、不正当性、不正当性、不正当性、不正当性、不正当性和不正当性。我的发明者ipsa，sed vero voluptate

Lorem ipsum dolor sit amet，奉献精英。流动性、不正当性、不正当性、不正当性、不正当性、不正当性和不正当性。我的发明者ipsa，sed vero voluptate

---

`

在您的第一张幻灯片上，您的类

处于活动状态

，但它还需要类

项

。因此，您的第一张幻灯片的包装应该按照以下方式编写，并且应该可以正常工作：

<div class="item active"> 

而不是

<div class="active">

在您的问题中，您还想知道是否可以使用本机引导旋转木马以移动宽度一次仅显示一条评论。不幸的是，就我所知，这是不可能的。它总是一次显示3条，但它们将在整个屏幕上显示，因此它将在整个屏幕上循环所有3条评论。我认为如果您想使用本机引导旋转木马，您可以在每张幻灯片中只显示3条评论中的一条，但您永远看不到其他2条评论，或者您可以写出2条不同的旋转木马，只在较大屏幕上显示一条，在较小屏幕上显示一条，显示宽度为所需的：none css属性。然后，如果您想让它们根据屏幕大小自动滑动，一次只激活一个，但这需要一些额外的jquery脚本

也许你最好的选择是查看第三方旋转木马，这样可以让你在javascript中设置你想要在不同屏幕大小上显示的评论数量

这是一个即插即用的html页面，供您在owl转盘上使用

<!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>

/*此样式仅用于演示目的*/
.猫头鹰旋转木马h4{
文本对齐：居中；
填充：40px；
保证金：0；
背景：#4DC7A0；
最小高度：40px；
颜色：白色；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
$（文档）.ready（函数（）{
$（'.owl carousel'）。owl carousel({
循环：对，
差额：10，
导航：是的，
响应：{
0:{
项目：1
},
768:{
项目：3
},
1000:{
项目：5
}
}
});
});

我只是链接到cdn文件，这样你就可以看到它在不做任何事情的情况下工作。但是我会下载owl旋转木马文件，当你解压它们时，所需的文件将在dist文件中。只需将它们添加到项目中，并更新css和javascript链接中的路径即可

---

无论如何，希望这能有所帮助。

在您的第一张幻灯片中，您的类

处于活动状态

，但它还需要类

项

。因此，您的第一张幻灯片的包装应该按照以下方式编写，并且应该可以正常工作：

<div class="item active"> 

而不是

<div class="active">

在您的问题中，您还想知道是否可以使用本机引导旋转木马以移动宽度一次仅显示一条评论。不幸的是，就我所知，这是不可能的。它总是一次显示3条，但它们将在整个屏幕上显示，因此它将在整个屏幕上循环所有3条评论。我想如果你想用n