Svelte에서 캐러셀(carousel)을 구현하는 방법은 여러 가지가 있지만, 가장 간단한 방법은 onMount 함수와 let을 사용하는 것입니다.

먼저, Svelte 파일의 <script> 블록에서 다음과 같이 코드를 작성합니다:

import { onMount } from 'svelte';

let currentSlide = 0;
const totalSlides = 3;

onMount(() => {
  setInterval(() => {
    currentSlide = (currentSlide + 1) % totalSlides;
  }, 2000);
});

위의 코드는 currentSlide 변수를 사용하여 현재 슬라이드를 추적합니다. totalSlides는 전체 슬라이드 개수를 나타내는 변수입니다. onMount 함수는 Svelte 컴포넌트가 마운트될 때 실행되는 함수입니다. 이 함수 안에는 setInterval 함수를 사용하여 슬라이드를 일정 간격으로 전환하는 로직을 작성합니다.

Svelte 파일의 마크업 부분에서는 currentSlide 변수를 통해 현재 슬라이드에 접근할 수 있습니다. 예를 들어, <img> 요소의 src 속성을 현재 슬라이드 이미지의 URL로 설정할 수 있습니다:

<img {src=`/images/slide${currentSlide}.jpg`} alt="Slide">

위의 코드에서 {} 중괄호는 Svelte의 반응형 바인딩을 나타냅니다. 이를 통해 currentSlide 값이 변경될 때마다 이미지 URL이 자동으로 업데이트됩니다.

이제 슬라이드가 일정 간격으로 전환되는 캐러셀을 Svelte에서 구현할 수 있습니다.