Question

我试图通过轮播方法显示此业务的评论，每张幻灯片在大屏幕和中等屏幕上显示3条评论，但在小屏幕上只显示一条评论

对于每个评论，它上面会有星级评分和它下面的评论（上帝，我希望这是有道理的）。

所以每张幻灯片都会显示3条评论，下一张幻灯片会显示3条评论，依此类推。但在移动屏幕上，它只会显示一条评论。

我在插画家上制作了星星作为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文件，所以你可以看到这个工作没有做任何事情。但我会下载owl carousel文件，当你解压缩它们时，所需的文件将在dist文件中。只需将它们添加到您的项目并更新css和javascript链接中的路径。

无论如何希望这有帮助。

每个“幻灯片”上都有响应列的轮播将不会转到下一张幻灯片

1 个答案: