Swiper pagination 종류(bullets, progressbar, fraction, custom)

CSS 24.04.16

스와이퍼(Swiper) pagination은 웹 또는 앱에서 콘텐츠를 스와이프(swipe)하여 페이지를 전환하는 방식을 말합니다.

스와이퍼 pagination은 사용자가 페이지를 스와이프하여 다음 페이지로 이동할 수 있게 해주는 인터페이스 요소입니다.

아래는 각각의 Swiper pagination 유형에 대한 예제와 해당 유형을 설정하는 JavaScript 코드입니다.

1. Bullets (점 형태의 인디케이터)

swiper demo : https://swiperjs.com/demos#pagination

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
 
<script>
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});
</script>
 
Colored by Color Scripter
cs
6

2. Progressbar (프로그레스 바 형태의 인디케이터)

swiper demo : https://swiperjs.com/demos#pagination-progress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
 
<script>
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar',
  },
});
</script>
 
Colored by Color Scripter
cs
 

3. Fraction (분수 형태의 인디케이터)

swiper demo : https://swiperjs.com/demos#pagination-fraction

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
 
<script>
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
});
</script>
 
Colored by Color Scripter
cs

 

4. Custom (사용자 정의된 인디케이터)

swiper demo : https://swiperjs.com/demos#pagination-custom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="custom-pagination"></div>
</div>
 
<script>
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.custom-pagination',
    renderCustom: function (swiper, current, total) {
      return current + ' of ' + total;
    },
  },
});
</script>
 
Colored by Color Scripter
cs

목록으로

최근 포스트

Design Kits Blog