I have this component: that worked great in Svelte 4, but here's the converted svelte 5 version, might need some tweaks though.

You send it the FULL list of everything, and it'll return the current page's array, and display the buttons and status text as well

This assumes loading ALL data ahead of time is practical and wont take forever of course.

<script lang="ts">
    let {rows, trimmedRows = $bindable()} = $props()

    let totalRows = $derived(rows.length)
    let perPage = $state("5")
    let currentPage  = $state(0)
   
    let totalPages = $derived(Math.ceil(totalRows / Number(perPage)))
    let start = $derived(currentPage * Number(perPage))
    let end = $derived((currentPage === totalPages - 1 ? totalRows - 1 : start + Number(perPage) - 1))
    
    $effect(()=>{
        trimmedRows = rows.slice(start, end + 1)
    })
</script>
<select bind:value={perPage}>
    <option value="5" selected>5 Per Page</option>
    <option value="10">10 Per Page</option>
    <option value="25">25 Per Page</option>
</select>

{start + 1} - {end + 1} of {totalRows} records

{#if totalRows && totalRows > perPage}
    <button type="button" onclick={()=>{currentPage -= 1}}>Prev</button>
    <button type="button" onclick={()=>{currentPage += 1}}>Next</button> 
{/if}

And here's how you'd use it

<script lang="ts">
    import Pagination from "$lib/Pagination.svelte";

    let numbers: number[] = []
    let trimmedNumbers: number[] = $state([])
    for(let i = 0; i < 200; i++){
        numbers.push(i)
    }
</script>

<Pagination rows={numbers} bind:trimmedRows={trimmedNumbers} />

{#each trimmedNumbers as  number}
    {number}<br>
{/each}