[JS] 가장 흔한 swiper slide 사용하기 [virtual]

Swiper Virtual Slides 사용법

Swiper로 슬라이드를 만들다 보면 어느 순간 슬라이드가 너무 많아질 때가 있습니다. 몇 개 안 되는 슬라이드라면 기본 설정만으로도 충분하지만, API에서 받아온 목록이 길거나 각 슬라이드에 이미지가 들어간다면 Virtual Slides를 한 번 살펴볼 만합니다.

Swiper Virtual Slides 공식 문서 보기

1. Virtual Slides는 왜 사용할까?

일반적인 방식은 슬라이드가 50개라면 그만큼의 슬라이드 요소를 DOM에 만듭니다. Virtual Slides는 현재 화면에 필요한 슬라이드와 그 주변 슬라이드만 렌더링합니다. 슬라이드가 많고 내부 요소가 무거울수록 DOM 부담을 줄이는 데 도움이 됩니다.

구분	일반 슬라이드	Virtual Slides
DOM 요소	슬라이드 개수만큼 유지	현재 화면에 필요한 슬라이드 위주로 렌더링
메모리	슬라이드가 많아질수록 부담이 커질 수 있음	DOM 부담을 줄일 수 있지만, 데이터와 캐시는 별도로 메모리를 사용
이미지·동영상	여러 슬라이드가 한꺼번에 화면에 존재	슬라이드 렌더링 범위를 줄임. 미디어 로딩·재생은 별도 관리 필요

여기서 한 가지는 짚고 넘어가야 합니다. Virtual Slides를 켠다고 메모리 사용량이 언제나 일정해지거나 60fps가 보장되는 것은 아닙니다. 슬라이드 데이터는 남아 있고, 한 번 렌더링한 슬라이드의 DOM을 캐시할 수도 있습니다. 동영상도 슬라이드가 바뀌었다고 자동으로 재생이 멈추는 것은 아니니 따로 처리해야 합니다.

2. 다른 옵션과 함께 쓸 때는?

처음에는 Virtual Slides만 적용해서 슬라이드가 잘 넘어가는지 확인해 보세요. 그다음 필요한 옵션을 하나씩 추가하면 문제가 생겼을 때 원인을 찾기가 편합니다.

옵션	확인할 점
slidesPerView	숫자로 지정해 사용합니다. 공식 문서는 'auto'와 Virtual Slides의 조합을 지원하지 않는다고 안내합니다.
Grid	Virtual Slides와 함께 사용할 수 없다고 안내되어 있습니다.
loop	Swiper 9부터 함께 사용할 수 있습니다. 슬라이드 개수 등 loop 조건을 맞춰야 합니다.
freeMode	Virtual Slides를 사용하기 위해 반드시 켜야 하는 옵션은 아닙니다.
effect	효과 종류와 슬라이드 구성에 따라 화면이 원하는 대로 보이는지 확인해 주세요.

특히 슬라이드 너비를 CSS로 각각 다르게 잡으려고 slidesPerView: 'auto'를 쓰고 있었다면 주의가 필요합니다. 처음에는 잘 보이다가 슬라이드를 넘긴 뒤 간격이 어긋난다면 이 설정부터 확인해 보세요.

3. HTML과 JavaScript에서 적용하기

기본 HTML 구조는 익숙한 Swiper와 같습니다. 다만 아래 예제에서는 swiper-wrapper 안을 비워 둡니다. 슬라이드 내용은 JavaScript의 virtual.slides 배열로 전달할 거예요.

Swiper를 설치하지 않았다면 먼저 npm install swiper를 실행합니다. 아래 JavaScript는 npm 패키지를 사용하는 프로젝트 기준입니다.

<div class="swiper">
  <div class="swiper-wrapper"></div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

import Swiper from 'swiper';
import { Virtual, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/virtual';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const slides = Array.from({ length: 600 }, (_, index) => `Slide ${index + 1}`);

new Swiper('.swiper', {
  modules: [Virtual, Pagination, Navigation],
  slidesPerView: 3,
  virtual: { slides },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
});

여기서 중요한 부분은 modules에 Virtual을 넣고, virtual.slides에 전체 슬라이드 데이터를 전달하는 것입니다. 예제는 600개의 문구를 만들었지만, 실제로는 API에서 받은 데이터를 넣어도 됩니다. API를 사용한다면 데이터를 받은 뒤 Swiper를 생성하는 방식부터 시도해 보세요.

4. React에서 사용하기

React에서는 swiper-wrapper를 직접 작성할 필요가 없습니다. SwiperSlide를 map으로 만들고, 각 슬라이드에 virtualIndex를 넘겨주면 됩니다. 이 값은 전체 목록에서 해당 슬라이드가 몇 번째인지 알려 줍니다.

import { Swiper, SwiperSlide } from 'swiper/react';
import { Virtual, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/virtual';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const slides = Array.from({ length: 600 }, (_, index) => ({
  id: index + 1,
  title: `Slide ${index + 1}`,
}));

export default function VirtualSlider() {
  return (
    <Swiper
      modules={[Virtual, Pagination, Navigation]}
      slidesPerView={3}
      virtual
      pagination={{ type: 'fraction' }}
      navigation
    >
      {slides.map((slide, index) => (
        <SwiperSlide key={slide.id} virtualIndex={index}>
          {slide.title}
        </SwiperSlide>
      ))}
    </Swiper>

잘못된 부분 지적이나 더 좋은 코드댓글은 언제나 감사합니다!