제이쿼리 슬라이더 페이지 네이션 커스텀 (swiper)

페이지 네비게이션 커스텀 해보자 

Pagination custom

---

먼저 html. css로 자리 잡아놓기 

 

/* 일시정지 버튼 */

.main_slider2_wrap .btn_wrap {

  position: absolute;

  left: 0;

  bottom: 100px;

  width: 295px;

  height: 89px;

  background: url(../images/main_label.png) no-repeat;

  z-index: 100;

  text-align: center;

  padding-top: 40px;

}

 

.main_slider2_wrap .btn_wrap .btn_arrow {

  width: 24px;

  height: 34px;

  border: 1px solid black;

  display: inline-block;

  background: none;

  font-size: 24px;

  line-height: 34px;

  /* 포지션 기본값 */

  position: static;

  margin-top: 0;

  color: #E37886;

}

 

.main_slider2_wrap .btn_wrap .swiper-pagination {

  color: #fff;

  font-size: 24px;

  border: 700;

  position: static;

  display: inline-block;

  width: auto;

  margin: 0 15px;

}

 

swiper 홈페이지에서 페이지네이션 코드 찾기

 

 

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

Swiper Demos

 

 

 

데모에 > pagination fracrtion> 코어

 

https://codesandbox.io/s/j4019k?file=/index.html:2690-2814 

Swiper - Pagination custom - CodeSandbox

 

그럼

Pagination fraction 

에 필요한 커스텀 소스를 얻을수 있음 

 

 

 

 

renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + "</span>";

    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      // 숫자타입
      // type: 'fraction',
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 999) + '</span>';
      },
    },

기존에 적용되어있던 제이쿼리 옵션 요소 pagination 에 추가

 

인덱스 값 설정시 변경됨 확인

 

자 원본처럼 숫자 자리수가 01,02로 나오게 수정해보자

---

 

 

 

참고링크 https://eond.com/jquery/439598

[swiperjs] 스와이퍼 페이징 2자리 수 출력 - 이온디

 

formatFractionCurrent: function (number) {
            return ('0' + number).slice(-2);
        },
        formatFractionTotal: function (number) {
            return ('0' + number).slice(-2);
        },

제이쿼리에선 값의 자리수는

음수일때는 -1 으로 맨 뒤부터 카운팅 

양수일때는 0 으로 맨 앞부터 카운팅된다.

 

slice에 -2 를 준 이유는

010이 기본값이기 때문에 뒤에서 2번째 자리에서 잘라내서 

01,02,03..... 식으로 나오게 해라 라는 뜻

슬라이드가 열개 이상일 경우 ex .010,011 이 되므로 뒤에서 두번째 부터 끝까지 잘라줌

 

 

 

 

 

그럼 2자리수 나오는것 확인

 또 다른 방법은??

      type: 'fraction',
      formatFractionCurrent: function (number) {
        return number < 10 ? '0' + number : number;
      },
      formatFractionTotal: function (number) {
        return number < 10 ? '0' + number : number;
      },

---

 

/ 지우기

 

 

 

 

---

 

      renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '">0</span><span class="' + totalClass + '"></span>';
      },

기본 css에 들어가있는 currentClass, totalClass 를 매개변수로 받는다

 

 

 

 

 

 

---

 

완성

.main_slider2_wrap .btn_wrap .swiper-pagination span {
  padding: 0 20px;
  position: relative;
}

.main_slider2_wrap .btn_wrap .swiper-pagination span + span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 2px;
  height: 18px;
  background: #E37886;
}

 

 

 

---

기존 홈페이지 소스 찾아보기 

 

검색활용