如何使用轮播添加谷歌评论

Question

我想在我的网站中添加Google review 和carousel slide。

我已经收到评论，但我想在carousel-slide 中显示这些评论。

这是我的代码：

//HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
     <div id="google-reviews"></div> <!-- Google review here -->
    </div>
    <div class="item">
      <div class="row" style="padding: 20px">
        <button style="border: none;"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button>
        <p class="testimonial_para">
        Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.
        </p>
      </div>
    </div>
  </div>
</div>

//JS google-places.js

<script>
var renderReviews = function(reviews){
    reviews = sort_by_date(reviews);
    reviews = filter_minimum_rating(reviews);
    var html = "";
    var row_count = (plugin.settings.max_rows > 0)? plugin.settings.max_rows - 1 : reviews.length - 1;
    // make sure the row_count is not greater than available records
    row_count = (row_count > reviews.length-1)? reviews.length -1 : row_count;

    for (var i = row_count; i >= 0; i--) {
        var stars = renderStars(reviews[i].rating);
        var date = convertTime(reviews[i].time);
        html = html+"<div class='review-item'><div class='review-meta'><span class='review-author'>"+reviews[i].author_name+"</span><span class='review-sep'>, </span><span class='review-date'>"+date+"</span></div>"+stars+"<p class='review-text'>"+reviews[i].text+"</p></div>"
        console.log(html);
    };

    $element.append(html);
}
</script>

我如何分隔 html 值？

演示轮播链接https://codepen.io/nikhil/pen/NqmQag

Answer 1

我已经修改了这个脚本，这对我来说很好。只需为第一个项目添加活动类，因为轮播为所有项目设置了display none;。

 var renderReviews = function(reviews){
        reviews = sort_by_date(reviews);
        reviews = filter_minimum_rating(reviews);
        var html = "";
        var row_count = (plugin.settings.max_rows > 0)? plugin.settings.max_rows - 1 : reviews.length - 1;
        // make sure the row_count is not greater than available records
        row_count = (row_count > reviews.length-1)? reviews.length -1 : row_count;
        var counter=0;
        var active='';
        for (var i = row_count; i >= 0; i--) {
            if(counter==0){ active='active'; } else { active='' }
            var stars = renderStars(reviews[i].rating);
            var date = convertTime(reviews[i].time);
            html = html+"<div class='item "+active+"'><div class='review-meta'><span class='review-author'>"+reviews[i].author_name+"</span><span class='review-sep'>, </span><span class='review-date'>"+date+"</span></div>"+stars+"<p class='review-text'>"+reviews[i].text+"</p></div>"
            //console.log(html);
            counter++;
        };

        $element.append(html);
    }