using infinite scroll in a statamic collection/entries loop

template.html

{{ entries limit='6' paginate='true' as='articles' }}

  <div class="items-wrap">

    {{ if show_title=='true' }}
    <h2 class="group-title"><a href="{{ url }}">{{ title }}</a></h2>
    {{ /if }}

    <div class="items">
    {{ articles }}
      <div class="item">
        entry stufffff
      </div>
    {{ /articles }}
    </div>

    {{ paginate }}
    {{ if next_page }}
    <div class="view-more bottom-link">
      <button class="more-items">View More</button>
      <p style="display: none;">
        <a href="{{ next_page }}" class="more-items-link">Next</a>
      </p>
    </div>
    {{ /if }}
    {{ /paginate }}

  </div>

{{ /entries }}

template.js

$('.items-list .items').infiniteScroll({
  path: '.more-items-link',
  append: '.item',
  button: '.more-items',
  scrollThreshold: false,
});