Offscreen slides are bunching up on each side of the screen in looping slider

[TheOnlyTails]

I have a looping, centered slider written in Svelte using the core API, as in the provided code. I've been trying to create a sort of circular track effect, where the items appear to be moving as part of a bigger circle. However, you swipe or click the pagination buttons, the items that are supposed to go offscreen are instead bunched up on top of all the other ones, making for a jarring effect. Why is this happening?

{
			loop: true,
			slidesPerView: 1,
			centeredSlides: true,
			keyboard: true,
			slideToClickedSlide: true,
			breakpoints: {
				[48 * 16]: {
					slidesPerView: 2,
				},
			},
			effect: "creative",
			creativeEffect: {
				next: {
					scale: 0.85,
					translate: ["-100%", "20%", 0],
				},
				prev: {
					scale: 0.85,
					translate: ["100%", "20%", 0],
				},
			},
		}

<div class="swiper max-w-screen !overflow-visible md:h-115 h-80">
		<div class="swiper-wrapper">
			{#each data.persons as person (person.id)}
				<article class="swiper-slide">
					<img
						class="select-none mx-auto p-4"
						height="460"
						width="460"
						src={mediaUrl(person.picture)}
						alt={typeof person.picture !== "number" ? person.picture.alt : ""}
						loading="lazy"
						decoding="async"
					/>
				</article>
			{/each}
		</div>
	</div>