Как адаптировать 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>