10분 안에 마스터하는 swiper 라이브러리 사용 방법

문제 상황/목표

이렇게 빙글빙글 돌아가는 것을 넣고 싶다.

이렇게 하려면 swiper 라이브러리를 사용한다.

게시판에 사용하면 좋을 것 같다!

 

방법

1. swiper 라이브러리를 설치한다.

터미널에서 아래 명령어를 입력한다.

npm i swiper

2. swiper 페이지에서 [Resources] > [Demos] 을 선택한다.

또는 아래 사이트를 접속한다.

https://swiperjs.com/demos

Swiper Demos

 

3. 가져오고 싶은 demo를 선택하여 코드를 참고한다.

vue 코드와 html 코드를 참고한다.

 

주의 : vue 코드로 옮길 때는 style.css 파일의 경로를 잘 설정해주어야 한다.

  import './style.css'; // 경로 체크 필수

 

 

3-1. 여러 데모를 사용하고 싶은 경우? (데모 커스텀마이징)

Ex) Infinite loop의 데모 요소도 사용하고 싶고, Autoplay의 데모 요소도 사용하고 싶다면?

-> 두 코드를 분석해보자.

 

Infinite loop 데모 코드

<template>
  <swiper
    :slidesPerView="1"
    :spaceBetween="30"
    :loop="true"
    :pagination="{
      clickable: true,
    }"
    :navigation="true"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/pagination';
  import 'swiper/css/navigation';

  import './style.css';

  // import required modules
  import { Pagination, Navigation } from 'swiper/modules';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        modules: [Pagination, Navigation],
      };
    },
  };
</script>

 

Autoplay 데모 코드

<template>
  <swiper
    :spaceBetween="30"
    :centeredSlides="true"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :pagination="{
      clickable: true,
    }"
    :navigation="true"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/pagination';
  import 'swiper/css/navigation';

  import './style.css';

  // import required modules
  import { Autoplay, Pagination, Navigation } from 'swiper/modules';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        modules: [Autoplay, Pagination, Navigation],
      };
    },
  };
</script>

 

일일이 비교하려면 너무 힘들다. 이때 Beyond Compare 4 프로그램을 깔아서 사용하면 아래 이미지처럼 쉽게 달라진 점을 알 수 있다.

 

Autoplay 데모에서만 있는 코드는 아래와 같다.

    :centeredSlides="true"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    
    .... 중략
    
    import { Autoplay, Pagination, Navigation } from 'swiper/modules';
    
    .... 중략
    
    modules: [Autoplay, Pagination, Navigation],

Autoplay 데모는 자동으로 돌아가도록 하는 기능이므로 저 코드를 추가하면 자동으로 돌아가겠다는 것을 유추할 수 있다.

 

반면, Infinite loop 데모에서만 있는 코드는 아래와 같다.

:slidesPerView="1"
:loop="true"

... 중략

  import { Pagination, Navigation } from 'swiper/modules';
  
 ... 중략
 
 modules: [Pagination, Navigation],

따라서 Infinite loop 데모는 끝까지 가도 계속 돌도록 하는 기능을 가지고 있었는데 저 코드를 추가하면 계속 돌 수 있게 구현할 수 있다는 것을 유추할 수 있다.

 

Summary : Swiper 옵션 모음

<template>
  <!-- Swiper 컴포넌트에서 어떤 옵션들을 넣을지? -->
  <swiper
    :initialSlide="0"                  <!-- 슬라이드의 시작 Index 번호 지정 (모듈 필요 없음) -->
    :direction="'horizontal'"          <!-- 슬라이드 방향 설정 (모듈 필요 없음) -->
    :speed="300"                       <!-- 슬라이드 애니메이션 속도 (모듈 필요 없음) -->
    :autoHeight="false"                <!-- 자동 높이 조절 비활성화 (모듈 필요 없음) -->
    :effect="'slide'"                  <!-- 슬라이드 효과 설정 (모듈: EffectFade, EffectCube 등 효과에 따라 다름) -->
    :spaceBetween="30"                 <!-- 슬라이드 간의 간격 (픽셀 단위, 모듈 필요 없음) -->
    :slidesPerView="4"                 <!-- 한 번에 보여줄 슬라이드 수 (모듈 필요 없음) -->
    :slidesPerGroup="1"                <!-- 동시에 슬라이드 할 슬라이드 수 (모듈 필요 없음) -->
    :centeredSlides="false"            <!-- 활성화된 슬라이드를 중앙에 배치 비활성화 (모듈 필요 없음) -->
    :loop="true"                       <!-- 슬라이드가 끝나면 처음으로 돌아가는 무한 루프 설정 (모듈: Autoplay 사용 시 필요) -->
    :loopedSlides="null"               <!-- 복제한 슬라이드 수 (auto일 경우 지정, 모듈 필요 없음) -->
    :breakpoints="{                     <!-- 화면 크기마다 다른 파라메터 지정 (모듈 필요 없음) -->
      640: { slidesPerView: 1 },       <!-- 640px 이하에서 슬라이드 수 1 -->
      768: { slidesPerView: 2 },       <!-- 768px 이하에서 슬라이드 수 2 -->
      1024: { slidesPerView: 3 }        <!-- 1024px 이하에서 슬라이드 수 3 -->
    }"
    :pagination="{ clickable: true }"  <!-- 페이지네이션 설정, 클릭 가능하게 함 (모듈: Pagination) -->
    :navigation="true"                 <!-- 내비게이션 버튼(이전/다음) 활성화 (모듈: Navigation) -->
    :freemode="false"                  <!-- 스크롤 모드 비활성화 (모듈: FreeMode 사용 시 필요) -->
    :modules="modules"                 <!-- 사용하고자 하는 Swiper 모듈 설정 -->
    class="mySwiper"                   <!-- CSS 클래스 이름, 스타일링 용도 -->
  >
    <!-- 슬라이드 내용 -->
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper>
  <!-- Swiper 컴포넌트 끝 -->
</template>

<script setup>
  // Swiper Vue.js 컴포넌트를 가져오기
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Swiper 스타일 파일 가져오기
  import 'swiper/css';                   // 기본 스타일
  import 'swiper/css/pagination';        // 페이지네이션 스타일
  import 'swiper/css/navigation';        // 내비게이션 스타일
  import './style.css';                  // 추가 스타일 (사용자 정의)

  // 필요한 모듈 가져오기
  import { Pagination, Navigation, EffectFade, Autoplay, FreeMode } from 'swiper/modules'; // 필요한 모듈

  // 사용할 Swiper 모듈 정의
  const modules = [Pagination, Navigation, EffectFade, Autoplay, FreeMode];  // 필요한 모듈 포함
</script>