How to display next and previous pagination wordpress

Question

i want to add next and previous button on my wordpress custom pagination when click next then the previous button does not appear, as well as the previous button and how to give limit page number if the page number is 8 then before ".." same as the screenshoot.

i want display like this have button next and previous

this is my custom function pagination.php

<?php
function pagination($pages = '', $range = 2)
{  
     $showitems = ($range * 2)+1;  

     global $paged;
     if(empty($paged)) $paged = 1;

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   

     if(1 != $pages)
     {
         echo "<div class='page-navigation red spaced'>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<a class='page-navigation-item active'>".$i."</a>":"<a href='".get_pagenum_link($i)."' class='page-navigation-item' >".$i."</a>";
             }
         }

         if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
         echo "</div>\n";
     }
}

and this template pagination

<div class="page-navigation red spaced">
    <!-- CONTROL PREVIOUS -->
    <div class="slider-control big control-previous">
      <!-- ARROW ICON -->
      <svg class="arrow-icon medium">
        <use xlink:href="#svg-arrow-medium"></use>
      </svg>
      <!-- /ARROW ICON -->
    </div>
    <!-- /CONTROL PREVIOUS -->
    <a href="#" class="page-navigation-item">1</a>
    <a href="#" class="page-navigation-item active">2</a>
    <a href="#" class="page-navigation-item">3</a>
    <a href="#" class="page-navigation-item">...</a>
    <a href="#" class="page-navigation-item">8</a>
    <!-- CONTROL PREVIOUS -->
    <div class="slider-control big control-next">
      <!-- ARROW ICON -->
      <svg class="arrow-icon medium">
        <use xlink:href="#svg-arrow-medium"></use>
      </svg>
      <!-- /ARROW ICON -->
    </div>
    <!-- /CONTROL PREVIOUS -->
  </div>

Answer 1

This code works in archive page. Just change total and current args for another usage

<div class="pageinate">
                <?php 
                    global $wp_query;
                    
                    echo paginate_links( array(
                        'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
                        'total'        => $wp_query->max_num_pages,
                        'current'      => max( 1, get_query_var( 'paged' ) ),
                        'format'       => '?paged=%#%',
                        'show_all'     => false,
                        'type'         => 'plain',
                        'end_size'     => 2,
                        'mid_size'     => 1,
                        'prev_next'    => true,
                        'prev_text'    => sprintf( '<', __( 'Newer Posts', 'text-domain' ) ),
                        'next_text'    => sprintf( '>', __( 'Older Posts', 'text-domain' ) ),
                        'add_args'     => true,
                        'add_fragment' => '',
                    ) );
                ?>
            </div>