Jscroll doesn't seems to work on Laravel 5.4

[mkantautas]

Hello, Jscroll doesn't seem to work for some reason. I've followed this tutorial -> https://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll But the scrolling just doesn't give any effect - I only seem the only one, first loaded item that is loaded when the page loads. There are no errors in the console.

controller:

public function photo()
    {
        $photos = Photo::where('user_id', Auth::user()->id)
            ->paginate(1);
        return view('reports/photo')->with('photos',$photos);
    }

view:

  <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="infinite-scroll">
                    @foreach($photos as $photo)
                        <h4 class="media-heading">{{ $photo->photo_link }}
                            <small>{{ $photo->created_at->diffForHumans() }}</small>
                        </h4>
                        {{ $photo->photo_at }}
                        <hr>
                    @endforeach

                    {{ $photos->links() }}
                </div>
            </div>
        </div>
    </div>

at  the same file bottom:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                    <script src="/js/bootstrap.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script>

<script type="text/javascript">

    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            debug: true,
            loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>