Add multiple elements to the owl-carousel using pagination

0

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.

    
asked by anonymous 22.02.2018 / 23:25

0 answers