每个 "slide" 上带有响应列的轮播不会转到下一张幻灯片

Question

我正在尝试通过轮播方式显示对该商家的评论，每张幻灯片在大屏幕和中屏幕上会显示 3 条评论，但在小屏幕上只会显示一条评论

对于每条评论，上面都会有星级评分，下面会有评论（天哪，我希望这是有道理的）。

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

我在 illustrator 上将星星制作为 svg 图片，并为每张图片输入了来源。

问题：

当我点击轮播时，它不会转到下一张幻灯片。我知道我有正确的插件 b/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

在你的第一张幻灯片上你有 class active 但它还需要有 class item。所以你的第一张幻灯片的包装应该像下面这样写并且它应该工作：

<div class="item active">

而不是

<div class="active">

在您的问题中，您还想知道是否可以使用本机 bootstrap 轮播以移动宽度一次只显示一条评论。不幸的是，我的 knowledge 无法使用 bootstrap 旋转木马。它总是一次显示 3 个，但它们将在屏幕的整个宽度上，因此它会循环所有 3 个跨越屏幕宽度的评论。我想如果你想使用原生 bootstrap 轮播，你只能在每张幻灯片中显示 3 条评论中的一条，但你永远不会看到其他 2 条评论，或者你可以写出 2 个不同的轮播，并且只在大屏幕上显示一个，在小屏幕上显示一个 display:none css 属性在所需的宽度。如果您想让它们根据屏幕尺寸自动滑动，则一次只激活一个，但这需要一些额外的 jquery 脚本。

可能您最好的选择是查看像 Owl Carousel 这样的第三方轮播，它允许您在 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>

我刚刚链接到 cdn 文件，因此您无需执行任何操作就可以看到它正在运行。但我会下载 owl 轮播文件，当你解压它们时，所需的文件将在 dist 文件中。只需将它们添加到您的项目并更新 css 和 javascript 链接中的路径。

无论如何希望这对您有所帮助。

每个 "slide" 上带有响应列的轮播不会转到下一张幻灯片

carousel with responsive columns on each "slide" won't go to next slide

carousel

twitter-bootstrap

twitter-bootstrap-3