Как адаптировать Waypoints Infinite Scroll и Owl Carousel. У кого есть опыт в этом?

Создаю каталог страниц. Для этого используется owl carousel с горизонтальной каруселью (каталогом) и Waypoints Infinite Scroll. Проблема в том, что Owl не поддерживает динамические страницы каталога сайта. При загрузке каталога через Infinite Scroll загружаются сразу все страницы, а мне этого не надо. Нужно, что бы новые страницы подгружались по мере прокрутки карусели.

<div class="pagination">
              <div class="owl-carousel owl-pagination multiCarosel infinite-pagination">
                  <li class="item infinite-item"> <a href="#">1</a></li>
                  <li class="item infinite-item"> <a href="#">2</a></li>
                  <li class="item infinite-item"> <a href="#">3</a></li>
                  <li class="item infinite-item"> <a href="#">4</a></li>
                  <li class="item infinite-item"> <a href="#">5</a></li>
                  <li class="item infinite-item"> <a href="#">6</a></li>
                  <li class="item infinite-item"> <a href="#">7</a></li>
                  <li class="item infinite-item"> <a href="#">8</a></li>
                  <li class="item infinite-item"> <a href="#">9</a></li>
                  
                  <a class="infinite-more-link" href="submenu-pages/pagination1.1.html">More</a>
              </div>
            </div>

ничего сверхъестественного в настройках owl-carousel

secondary.owlCarousel({ // Настройка меню пагинации
    
        slideBy               : 2, // На сколько слайдов прокрутить
        itemsDesktop          : [1200,8],
        itemsDesktopSmall     : [992,7],
        itemsTablet           : [768,6],
        itemsMobile           : [480,4],
        pagination            : true,
        responsiveRefreshRate : 100,
        navigation            : true,
        navigationText        : ["",""],
        // Активация стрелок пагинации
        dots: false,
        loop: true,
        autoplay: false,
        navText: [],
        nav: true,
        margin: 0,
        responsive: { // Вместимость пагинации и адаптация
            0:{
                items:2
            },
            600:{
                items:4
            },            
            960:{
                items:6
            },
            1200:{
                items:7
            }
        }

А это уже настройки Waypoints Infinite Scroll

var pagination = new Waypoint.Infinite({
  element: $('.infinite-pagination')[0],
  horizontal: true,
  offset: 'right-in-view',
  handler: function(direction) {
    notify('right-in-view waypoint triggered')
  },

  onBeforePageLoad: function(){
  },
  onAfterPageLoad:function(){
  }
})

вторая страница или pagination1.1.html

 <li class="item infinite-item"> <a href="#">10</a></li>
    <li class="item infinite-item"> <a href="#">11</a></li>
    <li class="item infinite-item"> <a href="#">12</a></li>
    <li class="item infinite-item"> <a href="#">13</a></li>
    <li class="item infinite-item"> <a href="#">14</a></li>
    <li class="item infinite-item"> <a href="#">15</a></li>
    <li class="item infinite-item"> <a href="#">16</a></li>
    <li class="item infinite-item"> <a href="#">17</a></li>

Ответы (0 шт):