How to use my own element in Waypoints Infinite Scrolling?

Hi so i want to use my own element in the below JS script ? but it does not do anything

var infinite = new Waypoint.Infinite({

    element: $('infinite.container')[0],

    offset: 'bottom-in-view',

    onBeforePageLoad: function () {

    onAfterPageLoad: function ($items) {


I want to replace and add element: $(’.container’)[0],

but it does not do anything

My html code


  <div class="container">

    <div class="gallery">

     {% for items in prods %}

      <div class="gallery-item" tabindex="0">

        <img src="{{items.image.url}}" class="gallery-image" alt="">

        <div class="gallery-item-info">

            <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 56</li>
            <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>


        {% endfor %}

    <!-- End of gallery -->

{% if prods.has_next %}

  <a class="infinite-more-link" href="?page={{ prods.next_page_number }}">More</a>

{% endif %}

    <div class="loader"></div>

  <!-- End of container -->


so the above html shows 6 images but i want to scroll down and show more as they are added (Infinite scrolling) Please Help

The library i am Using:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.