Swiper js

Swiper는 웹사이트에서 터치 친화적인 슬라이더와 캐러셀을 만들기 위해 널리 사용되는 라이브러리입니다. 반응형 및 모바일 친화적인 인터페이스를 만드는 데 유용합니다. Swiper를 사용하는 기본적인 방법은 다음과 같습니다

1. 설치

npm 사용하기:

npm install swiper

yarn 사용하기:

yarn add swiper

CDN 사용하기: 다음 링크들을 HTML 파일에 포함시킵니다:

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. 기본 HTML 구조

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">슬라이드 1</div>
    <div class="swiper-slide">슬라이드 2</div>
    <div class="swiper-slide">슬라이드 3</div>
  </div>

  <!-- 페이지네이션 추가 -->
  <div class="swiper-pagination"></div>

  <!-- 내비게이션 추가 -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

3. Swiper 초기화

JavaScript 파일이나 스크립트 태그에서 Swiper를 초기화합니다:

// Swiper 스타일 가져오기
import 'swiper/swiper-bundle.min.css';

// Swiper의 핵심 및 필요한 모듈 가져오기
import Swiper, { Pagination, Navigation } from 'swiper';

// Swiper에 모듈 사용 설정
Swiper.use([Pagination, Navigation]);

// Swiper 초기화
const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

4. Swiper 커스터마이즈

Swiper는 높은 수준의 커스터마이즈가 가능합니다. 필요에 따라 설정을 조정할 수 있습니다. 일반적인 옵션은 다음과 같습니다:

• slidesPerView: 한 화면에 보이는 슬라이드의 수.
• spaceBetween: 슬라이드 사이의 공간 (픽셀 단위).
• loop: 무한 루프 모드 활성화.
• autoplay: 특정 지연 후 슬라이드를 자동으로 재생.

자동재생 및 무한 루프 예시

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});