我正在使评级滑块(旋转木马)动态，但我的所有记录都是垂直的

Question

<div class="container mt-4 mb-4 gfg" style ="background-color: #f6f6f6">
@if(!empty(count($homeData)))
<div class="row">
<div class="col-12">
<h3 class="text-center text-color font-weight-bold" style = "margin-top :10px">What Are Others Saying ?</h3>
</div>
</div>
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>

<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
@foreach($reviews as $review)
<div class="col-md-4">
<a>
<div class="home1-img mt-3">
<?php 
for($i=1;$i<6;$i++){
$check = '';
if($review->number_of_stars >= $i){
$check = 'checked';
}
echo '<span class="fa fa-star '.$check.'"></span>';
}
?>
<div class="home1-text mt-1" style="margin-bottom:30px;">
<p>{!! IlluminateSupportStr::limit($review->customer_review,100) !!}</p>
<h5 class="text-color font-weight-bold">{{ $review->customer_name }}</h5>
</div>
</div>
</a>
</div>
@endforeach                     
</div>
</div>

<!--.item-->

</div>
</div>
</div>
</div>
</div>
@endif
</div>

我正在使评级滑块(旋转木马(动态，但我的所有记录都是垂直的，但我希望有3个记录，然后在另一个幻灯片中有3个滑块，以此类推。我试过了，但记录只垂直。

Answer 1

问题是，您只有一张幻灯片，而您的所有数据都在该幻灯片中。你必须把评论分成一大块，然后循环。看看collectionchunk方法。

<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@foreach ($reviews->chunk(3) as $key => $reviewList)
<li data-target="#blogCarousel" data-slide-to="{{ $key }}" @if ($key == 0) class="active" @endif></li>
@endforeach
</ol>
<div class="carousel-inner" role="listbox">
@foreach ($reviews->chunk(3) as $key => $reviewList)
<div @if ($key == 0) class="item active" @else class="item" @endif>
<div class="row">
@foreach ($reviewList as $review)
<div class="col-md-4">
<a>
<div class="home1-img mt-3">
@php 
for ($i = 1; $i < 6; $i++) {
$check = '';
if ($review->number_of_stars >= $i) {
$check = 'checked';
}
echo '<span class="fa fa-star '.$check.'"></span>';
}
@endphp
<div class="home1-text mt-1" style="margin-bottom:30px;">
<p>{!! IlluminateSupportStr::limit($review->customer_review,100) !!}</p>
<h5 class="text-color font-weight-bold">{{ $review->customer_name }}</h5>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
@endforeach                     
</div>
</div>    
</div>
</div>

这应该让你知道如何做。必要时根据你的需要进行调整。