In my laravel 5 eCommerce web application, I have to make the dynamic carousels. I have made it, but there is 1 issue. Blank space is shown if the carousel does not have the products. How do I make it infinite loop ?
Here's the detail:
Consider I have 8 products in the carousels.
In the first slide (when the user lands on the page), he sees first 6 products out of 8 products. Now when he clicks the right arrow button, the carousel slides and shows the other 2 products (which is fine). But there is also a left over space of 4 products. So, to avoid that space, I have 2 options:
- Continue the loop: After showing product 7 and product 8 in the second slide, it should again show product 1 and start over again.
- Stop the carousel at the end: On second slide, the user should see only the other 2 products. Meaning, the carousel should slide up to 2 more products along with the previous slider's 4 products and should stop.
Now I have opted Option 1. But I am failing to make it infinite.
Can anybody help me out in this.
view
<div class="container">
<?php $i = $j = $k = 0; ?>
@foreach($carousels as $key => $carousel)
<div class="row">
<div class="col-md-9">
<h3>{{ $carousel }}</h3>
</div>
<div class="col-md-3">
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#{{ $carousel }}" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-success" href="#{{ $carousel }}" data-slide="next"></a>
</div>
</div>
</div>
<div class="row">
<div id="{{ $carousel }}" class="carousel slide hidden-xs" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
@foreach($prds as $prd => $products)
<div class="item active">
@foreach($products as $m => $product)
@if( $k < 6 )
@if( $i == $j )
<div class="col-lg-2">
<div class="col-item">
<div class="photo">
<img src="{{ url('/images/uploads/products/' . Safeurl::make($product->image_code) . '-163-163.jpg') }}" class="img-responsive" alt="a" />
</div>
{{ $product->prod_name }}
<br />
<a href="" class="hidden-sm">Add to Cart</a>
</div>
</div>
@endif
@endif
<?php $k++; ?>
@endforeach
</div>
@if($k > 6)
@if( $i == $j )
<div class="item">
<div class="col-lg-2">
<div class="col-item">
<div class="photo">
<img src="{{ url('/images/uploads/products/' . Safeurl::make($product->image_code) . '-163-163.jpg') }}" class="img-responsive" alt="a" />
</div>
{{ $product->prod_name }}
<br />
<a href="" class="hidden-sm">Add to Cart</a>
</div>
</div>
</div>
@endif
@endif
<?php $i++; ?>
@endforeach
</div>
</div>
<?php $j++; ?>
</div>
@endforeach
</div>
I tried this, but didn't helped:
$('.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));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
P.S.: All the carousel details are coming from the database.