Jquery 为什么此代码不适用于laravel 5中的动态旋转木马？

我试图在laravel 5电子商务网络应用程序中创建一个动态旋转木马

我遵循了这一点

但是我希望应该从我成功检索的数据库中检索产品

以下是控制器方法的代码：

public function index()
    {
        $carousels = Carousel::where('display', 'Enabled')->get();
        $products = DB::table('carousel_product AS cp')
                    ->join('products AS p', 'p.id', '=', 'cp.product_id')
                    ->join('carousels AS c', 'c.id', '=', 'cp.carousel_id')
                    ->select(
                        'p.id AS prod_id',
                        'p.name AS prod_name',
                        'p.code AS prod_code',
                        'p.short_description AS p_short_desc',
                        'p.price AS prod_price',
                        'p.discount_price AS prod_disc_price'
                    )->get();
        return view( 'home', compact( 'carousels', 'products' ) );
    }

以下是引导转盘动态：

<div class="container">
   <div class="carousels">
       @foreach( $carousels as $carousel )
           <div class="carousels-header">
               <h2><span class="line-center">{{ $carousel->name }}</span></h2>
           </div>

           <div class="carousel slide" id="{{ Safeurl::make($carousel->name) }}">
               <div class="row">
                   <div class="carousel-inner">
                       <?php $i = 0; ?>
                       @foreach( $products as $product )
                           <div class="item @if($i === 0) {{ 'active' }} @endif">
                               <div class="col-lg-3 col-md-3 col-sm-3">
                                   <img src="{{ url('/images/uploads/products', Safeurl::make($product->prod_code) . '.jpg') }}" class="img-responsive">
                               </div>
                               <?php $i++; ?>
                            </div>
                        @endforeach
                    </div>
                    <a class="left carousel-control" href="#{{ Safeurl::make($carousel->name) }}" data-slide="prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </a>
                    <a class="right carousel-control" href="#{{ Safeurl::make($carousel->name) }}" data-slide="next">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </a>
                </div>
        @endforeach
    </div>
</div>

如何修改上述jQuery代码

---

请帮帮我。谢谢。

在您的代码中，您可以为每个产品单独创建一个.item类，其中只有一个图像。但是您设置了一个类“col-lg-3 col-md-3 col-sm-3”，它将图像大小设置为（全宽/4）。因此，将类更改为“col-lg-12 col-md-12 col-sm-12”

所有这些

<link href="css/mystyle.css" rel="stylesheet" type="text/css">
<script src="js/app.js"></script>

等等

改变这个

<link href="{{ asset('css/mystyle.css') }}" rel="stylesheet" type="text/css">
 <script src="{{ asset('js/app.js') }}"></script>

col-lg-3 col-md-3 col-sm-3是我想要的。。每个

.item

类应该有1个产品，当用户登陆时，这将是4个产品。当他点击任意一个箭头时，只能移动一个产品。是的。。如果启用了

功能，我需要显示多个旋转木马。1.您将获得已启用的旋转木马和所有产品旋转木马图像，但您没有将这些图像与相应的旋转木马关联，因此请先执行此操作。2.如果您的产品只有4个图像，则表示尝试将这些图像放入.item类中。这将在单击箭头键时移动产品。对于点1，我已经建立了
多对多
的关系。对于第2点，可以有任意数量的产品，完全没有限制，一旦它到达旋转木马的最后一个产品，它将重新开始。您希望在视图中显示单个产品图像（这意味着一次只显示一个图像）。有人能帮我吗？
<link href="{{ asset('css/mystyle.css') }}" rel="stylesheet" type="text/css">
 <script src="{{ asset('js/app.js') }}"></script>