How do i implement pagnation into my overcomplicated gallery

[picarica]

Hello si have this gallery, pretty good website, but yesterday client uploaded over 3000 images oto the site, and it cannot handle filtering them out and showing them at the same time , i wanted some simple pagination maybe infinite scrool or onclikc load whatever, but i cannot seem to implement infinite ajax scrool and any other JS methods, nut sure why i still got stuck at the next method, like there is not next page.

so i wanted to implement PW method of paginating i wanted to use MarkupPagerNav

so far i have  this code for outputting images

$pa = $pages->find("template=basic-page|art_gallery, images.tags!=''");
    /* $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); */
    echo "<div  class='js-filter' id='gal'  >";
    /* row gtr-50 gtr-uniform */
    $frame = $pages->get('/settings/')->watermark;
    foreach ($pa as $p) {
        foreach($p->images as $image) {
            if(!$image->hasTag("act")) {
                
                $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium');
                $large = $image->size(1200, 0, $options);
                $wmImage = $large->pim2Load('wm1', ['quality'=>80, 'upscaling' => true, 'sharpening'=>'medium', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='se',$padding=1.5)->pimSave();
                /* zmazanie variacii, treba odpoznakovat ked sa menia nastavenie vyssie */
                /* $image->pim2Load('wm1')->removePimVariations(); */
    
                $thumb = $image->size(400, 300, $options);
                
                echo "<div class='$image->tags grid-item' style=''>";
                echo "<span style='overflow:hidden;'class='image fit'>";
                echo "<a class='hvr-reveal' href='$wmImage->url'>";
                echo "<img  uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url'  alt='$image->tags'>";
                echo "</a>";
                echo "</span>";
                echo "</div>";
            } else {
                $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium');
                $large = $image->size(1200, 0, $options);
                $wmImage = $large->pim2Load('wm2', ['quality'=>80, 'upscaling' => true, 'sharpening'=>'medium', 'defaultGamma'=>-1])->pixelate(25)->smooth(255)->watermarkLogo($frame, $position='se',$padding=1.5)->pimSave();
                /* zmazanie variacii, treba odpoznakovat ked sa menia nastavenie vyssie */
                /* $image->pim2Load('wm2')->removePimVariations(); */
    
                $thumb = $image->size(400, 300, $options);
                
                echo "<div class='$image->tags blur grid-item' style=''>";
                echo "<span style='overflow:hidden;'class='image fit'>";
                echo "<a class='hvr-reveal' href='$wmImage->url'>";
                echo "<img  uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url'  alt='$image->tags'><span>18+</span>";
                /* <span>BY OPENING THIS IMAGE YOU CONSET THAT YOU'RE 18 YEARS OR OLDER</span> text copyraightova,y dat vedla obrazky potom */
                echo "</a>";
                echo "</span>";
                echo "</div>";
            }
        }
    };

to put it  simply, it first searches for sites, and then outputs all images from those sites, pretty simple, it also uses watermarking and uikit filtering

i have filtering done like this

$num = 1;
echo "<ul class='uk-subnav uk-subnav-pill'>";
foreach(array_unique($alltags) as $key => $tag) {
            echo"<li uk-filter-control='filter: .$tag;group: $num' class='butt$num' uk-toggle='target: .butt$num  ; animation: uk-animation-fade; queued: true'><a href='#'>$tag</a></li>";
            echo"<li uk-filter-control='group: $num' class='butt$num active' aria-hidden='true' hidden='' uk-toggle='target: .butt$num; animation: uk-animation-fade'><a href='#'>remove - $tag</a></li>";
            $num++;
        }
echo "</ul>";

simple, but i have NO idea how to implement pagination, just because it seems to work that it like find all images, and stores with limit, and then just paginates them, but i cannot apply this method in my code.

any idea how to make any JS inifite scroll work ? or just how to make this work ? with my setup, or with some modifications, it just have to work as is now