I use infinite-scroll.com and want to use it as pagination with a button “Load more”.
JS and other files are placed inside right directories.
Please help.
/* Custom settings for Infinite Scroll */
document.addEventListener("DOMContentLoaded", function() {
const nextPage = document.querySelector('.pagination a');
if (nextPage) {
var infScroll = new InfiniteScroll('.loop-wrap', {
path: '.pagination a',
append: '.post-card',
button: '.pagination button',
hideNav: '.pagination a',
history: false,
scrollThreshold: false
});
infScroll.on('append', function(response, path, items) {
for (var i = 0; i < items.length; i++) {
reloadSrcsetImgs(items[i]);
}
});
function reloadSrcsetImgs(item) {
var imgs = item.querySelectorAll('img[srcset]');
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
img.outerHTML = img.outerHTML;
}
}
}
});
in default list.html (relevant part):
<section>
<div class="latest-posts-section">
<div class="loop-wrap">
{{ $paginator := .Paginate (where .Pages "Type" "in" site.Params.mainSections) }}
{{ if $paginator }}
{{ range $paginator.Pages }}
{{- partial "post-card.html" . -}}
{{ end }}
</div>
<div class="break"></div>
{{ if gt (len (where .RegularPages "Type" "in" site.Params.mainSections )) 6 }}
<div class="pagination">
<a href="{{ .Paginator.Next.URL }}" aria-label="Load more" style="display: none;"></a>
<button class="button-primary">Load more</button>
</div>
{{ end }}
{{ end }}
</div>
</section>