I have a collection of items that should be added to owl-carousel
I have the following list of routes:
Route::get('/', 'Controller');
Route::get('listObjects', 'Controller@listObjects');
In Controller
I have the following methods:
public function __invoke(Repository $gestion)
{
$objects = $gestion->listObjects();
return view('index', compact('objects '));
}
public function listObjects(Repository $gestion, Request $request)
$objects = $gestion->listObjects();
if ($request->ajax()) {
return response()->json([
'objects' => view("fragments.carousel-item",['objects' => $objects])->render()
]);
}
}
And in Repository
I have the method that looks for the information of my model:
public function listObjects()
{
return $this->model->paginate(10);
}
These are the Views
index.blade.php
and fragments.carousel-item.blade.php
---------------------Index---------------------
@section('scripts')
{!! HTML::script('js/main.js') !!}
@stop
<ul class="owl-carousel owl-theme">
@include('fragments.carousel-item', compact('objects'))
</ul>
---------------------Carousel-item-------------
@foreach ($objects as $object)
<li class="item property-block">
<a href="#" class="property-featured-image">
<img src="{{ $object->picture }}" alt="Propriedade">
</a>
<div class="property-info">
<h4>
<a href="#">
{{ strtoupper($object->info) }}
</a>
</h4>
</div>
</li>
@endforeach
And finally this is the script that should make "magic" work:
var current_page = 1;
$('.owl-carousel').owlCarousel({
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
$(".owl-carousel").on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (e) {
if (!e.namespace) return;
var carousel = e.relatedTarget,
current = carousel.current();
if (current === carousel.maximum()) {
current_page++;
$.get('/listObjects', {
page: current_page,
})
.done(function (data) {
e.relatedTarget.add(data.objects);
e.relatedTarget.update();
})
}
});
The problem is that the listObjects
route returns all elements already rendered, so I could read the documentation of the owl-carousel, to add multiple elements, it is necessary to add one by one, that is, something like:
e.relatedTarget.add(data.object[1]);
e.relatedTarget.add(data.object[2]);
e.relatedTarget.add(data.object[3]);
e.relatedTarget.update();
The way it is, it's taking the list of 15 objects, and adding them as one, going something like this:
I'm hitting my head on how I could make it work.