Why this code is not working for dynamic carousel in laravel 5?

Question

I am trying to make a dynamic carousel in laravel 5 ecommerce web based application.

I have followed this tutorial

But I want that product(s) should be retrieved from the database, which I successfully retrieved.

Here's the code of the controller method:

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' ) );
    }

Here's the bootstrap carousel dynamic:

<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>

What I get after trying the above code is 3 products in each .item class while actually, it only needs to be 1 product in each .item class, and by default, the first product has to be .active.

EDIT 1:

The image is sliding properly, but when the user lands for the first time on the page, he can see only 3 product images while actually, there should be 4 product images.

When he clicks on either of the arrows, all the three images move to the respective side and again there are 3 product images seen instead of 4.

What I want:

When the user lands on the page, he should see all 4 product images. And when clicked on the arrows, only 1 product image should be moved. Just like the tutorial.

EDIT 2: The problem I guess is in jquery:

$('.carousel .item').each(function(){
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');
    } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

How do I amend the above jQuery code ?

Kindly help me. Thanks.

Answer 1

In your code you create a .item class for each products with single image alone. But you set a class "col-lg-3 col-md-3 col-sm-3" which makes your images size into (fullwidth/4) . So change the class like "col-lg-12 col-md-12 col-sm-12"

Answer 2

All this

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

and etc ..

change this

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