Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. swiper)

Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. swiper) - 3편

2023. 2. 27. 15:30ㆍVite

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

홈페이지 구축할 때, 자주 사용하는 UI 중 하나다

현업에서 slide, slider, carousel, swiper로 불린다

슬라이더 중에 가장 유명한 Swiper 모듈을 설치해 보자

1. swiper 설치하기

npm i swiper

package.json에 설치된 swiper 모듈

2. 기본적인 html 뼈대는 swiper 공식 홈페이지 문서에서 그대로 복사해 왔다

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div class="wrap">
      <div class="slideSection">
      
        <!-- Slider main container -->
        <div class="swiper">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          </div>
          <!-- If we need pagination -->
          <div class="swiper-pagination"></div>

          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- If we need scrollbar -->
          <div class="swiper-scrollbar"></div>
        </div>
        
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

3. 파라미터에 속성값을 추가해서 swiper 구현하기

/* main.js */
import './scss/style.scss'
//Swiper css
import 'swiper/css';
//Swiper module
import Swiper from 'swiper';


//init Swiper:
const swiper = new Swiper('.swiper', {
  // Optional parameters

});

4. 제대로 구현이 된 것인지 확인하기 위해, 이미지를 임의로 추가함

🏷 이미지 출처 : https://unsplash.com/ko

아름다운 무료 이미지 및 사진 | Unsplash

어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.

unsplash.com

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div class="wrap">
      <div class="slideSection">
        <!-- Slider main container -->
        <div class="swiper">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="/images/dummy_01.png" alt=""></div>
            <div class="swiper-slide"><img src="/images/dummy_01.png" alt=""></div>
            <div class="swiper-slide"><img src="/images/dummy_01.png" alt=""></div>
          </div>
          <!-- If we need pagination -->
          <div class="swiper-pagination"></div>

          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- If we need scrollbar -->
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

이미지 경로는 public 폴더 안에 images/ 안에 추가했다

/public/images/ 대신 /images/를 사용하라는 안내 메시지가 뜬다

* public 경로는 생략해 줘도 자동으로 경로를 찾아주는 것 같다!

5. pagination, navigation 플러그인 추가하기

/* main.js */
import './scss/style.scss'
//Swiper css
import 'swiper/css';
//1. navigation, pagination css 가져오기
import 'swiper/css/navigation';
import 'swiper/css/pagination';
//Swiper module
//2. navigation, pagination 모듈 가져오기
import Swiper, { Navigation, Pagination } from 'swiper';


//init Swiper:
const swiper = new Swiper('.swiper', {
  //Optional parameters
  //3. 모듈 사용 선언하기
  modules: [Navigation, Pagination],
  //4-1. pagination 속성 적용하기
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  //4-2. navigation 속성 적용하기
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

6. autoplay 적용하기

/* main.js */
import './scss/style.scss'
//Swiper css
import 'swiper/css';
//additional Swiper css
import 'swiper/css/navigation';
import 'swiper/css/pagination';
//Swiper module
//1. Autoplay 모듈 가져오기
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';


//init Swiper:
const swiper = new Swiper('.swiper', {
  //Optional parameters
  //2. 모듈 사용 선언하기
  modules: [Navigation, Pagination, Autoplay],
  //3. 속성 적용하기
  autoplay: {
   delay: 1000,
   disableOnInteraction: false,
  }, 
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

저작자표시 비영리 변경금지

'Vite' 카테고리의 다른 글

Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. gsap) - 2편 (0)	2023.02.25
Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. sass) - 1편 (0)	2023.02.24
간단하게 Vite로 프로젝트 생성하는 방법 (0)	2023.02.23

탐구하는 취르미