WordPress Gallery by Custom Post Type, lightbox of UIKIT and picture tag for webp images, on click image load issue [closed]

<div class="uk-child-width-1-2 uk-child-width-1-4Raumann classroom-training-gallery uk-grid" data-uk-grid="{gutter: 10}">
        <?php
    if ( $gallery_images->have_posts() ) :
        while ( $gallery_images->have_posts() ) : $gallery_images->the_post();
            global $post;
            if ( has_post_thumbnail( $post->ID ) ):
                $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-image' );
                $thumb_img =wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ),'home-gallery-thumbnail');
                $thumb_img_tag = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'home-gallery-thumbnail', false, array( "class" => "classroom-training-gallery-img" ) );
            endif;
    
            $file_ext = substr(strrchr(get_the_post_thumbnail_url(),'.'),1);
            if($file_ext == 'jpg' || $file_ext == 'png'){
                $webpurl = substr( $image[0], 0, -3);
                $webpurl_thumb = substr( $thumb_img[0], 0, -3);
                $file_check_url = str_replace(get_site_url()."/", ABSPATH, $webpurl);
                
            }else{
                $webpurl = substr( $image[0], 0, -4);
                $webpurl_thumb = substr( $thumb_img[0], 0, -4);
                $file_check_url = str_replace(get_site_url()."/", ABSPATH, $webpurl);
            }
            clearstatcache(); 
            $filecheck = file_exists( $file_check_url.'webp' );
            //echo get_site_url();
            ?>

            <a href="<?php if( $filecheck == true ) {echo $webpurl.'webp';}else{echo $image[0];}?>" data-caption="<?php the_title();?>" >
                <picture>
                    <source srcset="<?php if( $filecheck == true ) {echo $webpurl_thumb.'webp';}else{echo $thumb_img[0];}?>" type="image/webp">
                    <source srcset="<?php echo $thumb_img[0];?>" type="image/jpeg"> 
                    <?php echo  $thumb_img_tag;?>
                </picture>
            </a>
                
            <?php
        endwhile;
        wp_reset_postdata();
    endif;
            ?>

</div>

In a single gallery two many images are there, if I am clicking on thumbnail uikit loads all images of gallery.

I want to load 2-3 images by on click thumbnail or next/ previous button of gallery slider.

Here is link of documentation https://getuikit.com/docs/lightbox

Please help, if there is any property of loading current images of gallery slider instead of all.