Page Breaks When More Than 23 Images Used on iPhone

[acadia-ai]

Describe the bug
If there are more than 23 slides, it causes the page to reload multiple times before the page breaks on mobile devices, specifically iPhone.

To Reproduce
Steps to reproduce the behavior:

1. Create a Vue 3 component using <script setup>
2. Add the carousel within the template.
3. Iterate over the images and output the slides (setting to 24).

<template>
    <div>
        <Carousel :items-to-show="1" :autoplay="2000" :wrap-around="true">
            <Slide v-for="(image, index) in images" :key="index">
                <img class="w-full" :src="image.src" />
            </Slide>
        </Carousel>
    </div>
</template>

<script setup lang="ts">
import { resource } from '@/helpers';
import { Carousel, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

const images = Array.from(Array(23).keys()).map((i) => ({
    src: resource(`/images/${i + 1}.png`),
}))
</script>

Expected behavior
Should work with however many images you choose.

Smartphone (please complete the following information):

• Device: iPhone
• OS: iOS
• Browser Safari

Additional Context
I should add that this app is using a Laravel 10 backend and the Inertia stack.