Php 在laravel的滑块中查看多个图像时出错

我想在滑块中显示多个图像。我尝试了一些代码，但没有成功

控制器：

public function showProductDetails($product_id)
    {
        $product = Product::where(['id' => $product_id])->first();

        $product_images=ProductImages::where(['product_id' => $product_id])->get();

        return view('front.product_details',compact('product','product_images'));
    }  

刀片文件：

    <div class="col-lg-7 col-xs-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel">
            <div class="carousel-inner">
                @foreach($product_images as $result)
                    <div class="item active">
                       <div class="col-xs-4">
                            <a href="#1"><img src="<?php echo asset("images/products/$result->product_image") ?>" class="img-responsive"></a>
                        </div>
                    </div>
                  @endforeach

                  <!--  Example item end -->
             </div>
                    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
</div>  

可以查看图像，但并不完美。图像的查看方式如下：

请帮我解决这个问题。

试试这个

 <div class="col-lg-7 col-xs-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel">
            <div class="carousel-inner">
                @foreach($product_images as $result)
                    <?php $class = $loop->first ? 'item active': 'item'; ?> 

                    <div class="{{$class}}">
                       <div class="col-xs-4">
                            <a href="#1"><img src="{{ asset('images/products/'.$result->product_image)}}" class="img-responsive"></a>
                        </div>
                    </div>
                  @endforeach

                  <!--  Example item end -->
             </div>
                    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
</div>  

@foreach（$product\U图像作为$result）
@endforeach

您已将

active

添加到所有项目中。我相信这就是问题所在。

添加你的JS代码我添加了我的JS代码。@Sathishkumarrakkiasamy参考此以了解更多信息我尝试过，但所有图像都在单个滑块中打印。检查有多少项具有活动类。并检查控制台中是否有任何错误。有时CSS可能会出现问题。也请检查。我检查活动类..项目活动类是一个，但在项目活动中包含三个col-xs-4，我有两个图像您能找到为什么在一个项目中有两个图像的问题吗？我没有尝试您的代码，因为

$product\u images

数组，您能发送该数组，以便我可以尝试[{“id”：29，“product\u id”：30，“product\u image”：“4.jpg”，“创建时间”：“2018-03-26 11:47:00”，“更新时间”：“2018-03-26 11:47:00”{“id”：30，“产品id”：30，“产品图像”：“1522064820-img-11.jpg”，“创建时间”：“2018-03-26 11:47:00”，“更新时间”：“2018-03-26 11:47:00”]

 <div class="col-lg-7 col-xs-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel">
            <div class="carousel-inner">
                @foreach($product_images as $result)
                    <?php $class = $loop->first ? 'item active': 'item'; ?> 

                    <div class="{{$class}}">
                       <div class="col-xs-4">
                            <a href="#1"><img src="{{ asset('images/products/'.$result->product_image)}}" class="img-responsive"></a>
                        </div>
                    </div>
                  @endforeach

                  <!--  Example item end -->
             </div>
                    <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
</div>