Type something to search...
to navigateto selectESC to close

6 스와이퍼 Swiper

1. Swiper란?

참고

Swiper 공식 사이트

파일다운로드

Swiper는 터치 슬라이더 라이브러리. 모바일과 데스크톱 모두 지원.

주요 특징:

  • 터치/드래그 지원
  • 반응형 디자인
  • 다양한 효과 (fade, cube, flip 등)
  • 네비게이션, 페이지네이션 지원

2. 설치

2.1. CDN

1
<!-- CSS -->
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
3


4
<!-- JS -->
5
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

2.2. NPM

Terminal window
1
npm install swiper

3. 기본 구조

:::tip[필수 구조] 슬라이드는 반드시 두 단계로 감싸야 합니다. :::

4. 주요 옵션

API

6. 단계별 예제

6.1. STEP 1: 기본 슬라이더

미리보기 ▶ 

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>기본 Swiper</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
8
  <style>
9
    .swiper {
10
      width: 100%;
11
      height: 300px;
12
    }
13
    .swiper-slide {
14
      background: #eee;
15
      display: flex;
16
      align-items: center;
17
      justify-content: center;
18
      font-size: 24px;
19
    }
20
  </style>
21
</head>
22
<body>
23
  <div class="swiper">
24
    <div class="swiper-wrapper">
25
      <div class="swiper-slide">1</div>
26
      <div class="swiper-slide">2</div>
27
      <div class="swiper-slide">3</div>
28
    </div>
29
  </div>
30


31
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
32
  <script>
33
    const swiper = new Swiper('.swiper', {
34
      loop: true
35
    });
36
  </script>
37
</body>
38
</html>

6.2. STEP 2: 네비게이션 & 페이지네이션 추가

:::tip[필수 구조] .swiper-pagination, .swiper-button-prev, .swiper-button-next 는 반드시 .swiper-wrapper 와 형제요소로 삽입 합니다. :::

1
  <div class="swiper">
2
    <div class="swiper-wrapper">
3
      <div class="swiper-slide">1</div>
4
      <div class="swiper-slide">2</div>
5
      <div class="swiper-slide">3</div>
6
    </div>
7
    <!-- //.swiper-wrapper -->
8
    <!-- 페이지네이션 -->
9
    <div class="swiper-pagination"></div>
10
    <!-- 화살표 버튼 -->
11
    <div class="swiper-button-prev"></div>
12
    <div class="swiper-button-next"></div>
13
  </div>
14


15
  <script>
16
    const swiper = new Swiper('.swiper', {
17
      loop: true,
18
      // 페이지네이션 설정
19
      pagination: {
20
        el: '.swiper-pagination',
21
        clickable: true
22
      },
23
      // 네비게이션 설정
24
      navigation: {
25
        nextEl: '.swiper-button-next',
26
        prevEl: '.swiper-button-prev'
27
      }
28
    });
29
  </script>

6.3. STEP 3: 자동 재생

미리보기 ▶ 

1
const swiper = new Swiper('.swiper', {
2
  loop: true,
3
  autoplay: {
4
    delay: 3000,              // 3초마다 전환
5
    disableOnInteraction: false,// 사용자 조작 후에도 자동재생 유지
6
    pauseOnMouseEnter: true     // 마우스 올리면 일시 정지 (핵심 설정)
7
  },
8
  pagination: {
9
    el: '.swiper-pagination',
10
    clickable: true
11
  }
12
});

6.4. STEP 4: 여러 슬라이드 보이기

1
const swiper = new Swiper('.swiper', {
2
  slidesPerView: 3,    // 한 번에 3개 보이기
3
  spaceBetween: 20,    // 슬라이드 간격 20px
4
  centeredSlides: true, // 활성 슬라이드 중앙 배치
5
  loop: true
6
});

6.5. STEP 5: 반응형 설정

미리보기 ▶ 

1
const swiper = new Swiper('.swiper', {
2
  slidesPerView: 1,  // 기본 (모바일)
3
  spaceBetween: 10,
4


5
  // 화면 크기별 설정
6
  breakpoints: {
7
    // 640px 이상
8
    640: {
9
      slidesPerView: 2,
10
      spaceBetween: 20
11
    },
12
    // 768px 이상
13
    768: {
14
      slidesPerView: 3,
15
      spaceBetween: 30
16
    },
17
    // 1024px 이상
18
    1024: {
19
      slidesPerView: 4,
20
      spaceBetween: 40
21
    }
22
  }
23
});

6.6. 기타 예제

7. 이미지 갤러리 예제

swiper를 이용해 이미지갤러리를 제작한다. 가로 820픽셀 이미지 8 장을 준비하고 Swiper를 이용해서 3개의 이미지가 보여지며 페이지 이동과 이전, 다음 버튼을 이용해 이미지를 변경할 수 있도록 제작

미리보기 ▶

7.1. STEP1

7.2. STEP2

이미지 위치조정

7.3. STEP3

투명도 조정 및 버튼 배치

8. 동영상 슬라이더

9. 수직 슬라이더

1
<div class="swiper vertical">
2
  <div class="swiper-wrapper">
3
    <div class="swiper-slide">1</div>
4
    <div class="swiper-slide">2</div>
5
    <div class="swiper-slide">3</div>
6
  </div>
7
  <div class="swiper-pagination"></div>
8
</div>
9


10
<style>
11
  .vertical { width: 100%; height: 100vh; }
12
</style>
13


14
<script>
15
  const vertical = new Swiper('.vertical', {
16
    direction: 'vertical',  // 수직 방향
17
    slidesPerView: 1,
18
    mousewheel: true,       // 마우스 휠로 이동
19
    pagination: {
20
      el: '.swiper-pagination',
21
      clickable: true
22
    }
23
  });
24
</script>

10. 페이지네이션 종류

10.1. 기본 (bullets)

1
pagination: {
2
  el: '.swiper-pagination',
3
  clickable: true
4
}

10.2. 숫자형

1
pagination: {
2
  el: '.swiper-pagination',
3
  clickable: true,
4
  renderBullet: function(index, className) {
5
    return '<span class="' + className + '">' + (index + 1) + '</span>';
6
  }
7
}

10.3. 프로그래스바

1
pagination: {
2
  el: '.swiper-pagination',
3
  type: 'progressbar'
4
}

10.4. 분수형

1
pagination: {
2
  el: '.swiper-pagination',
3
  type: 'fraction'
4
}

11. 이벤트 활용

1
const swiper = new Swiper('.swiper', {
2
  on: {
3
    // 초기화 완료
4
    init: function() {
5
      console.log('Swiper 초기화 완료');
6
    },
7
    // 슬라이드 변경
8
    slideChange: function() {
9
      console.log('현재 슬라이드:', this.realIndex);
10
    },
11
    // 슬라이드 변경 완료
12
    slideChangeTransitionEnd: function() {
13
      console.log('전환 완료');
14
    }
15
  }
16
});

12. 참고 링크