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>