swiper의 pagination에 0을 붙이고 표시하고 싶습니다.
소개
요전날의 안건으로, swiper의 pagination에 0을 붙여 표시하고 싶다고 하는 요망이 있었다.
공식 사이트에서는 다음과 같습니다.
htps // 스페 rjs. 코 m /하지만 s # 파기 나치 온 - f 등 c 치온
(덧붙여 IE에 관해서는 V5계 이상으로부터 서포트외가 되었기 때문에, IE에서도 사용하고 싶은 경우는 v4. 5.1 이전의 것을 사용해 주세요.)
See the Pen swiper default by dan ( @___dan )
on CodePen .
이번에는, 「1/10」이 되고 있는 개소를, 「01/10」이 되도록 실장한다.
실장편
formatFractionCurrent라는 파라미터가 존재하고, 그것을 사용하면 현재 number의 값을 얻을 수 있는 것 같다.
이번에는 number에 0을 더하고 싶기 때문에 pagination을 다음과 같이 구현했다.
pagination: {
el: '.swiper-pagination',
type: 'fraction',
formatFractionCurrent: function (number) {
return '0' + number;
}
}
이것으로, 「01/10」과 같은 형태로 완성.
See the Pen swiper fraction by dan ( @___dan )
on CodePen .
<script async=""src="https://cpwebassets.codepen.io/assets/embed/ei.js"/>
보충
슬라이드의 개수가 10개 이상일 때를 고려하여 조금 조건 분기를 추가할 필요가 있다.
(지금 그대로는 10 이상의 수치일 때 '010/10'이 되어 버리기 때문에.)
취득한 number의 값이 10 이하만, 0을 더하도록 if문으로 조건식을 추가.
이것으로, 생각했던 대로의 형태가 되었습니다.
formatFractionCurrent: function (number) {
if (number < 10) {
return '0' + number;
} else {
return number;
}
}
See the Pen swiper fraction > 10 by dan ( @___dan )
on CodePen .
<script async=""src="https://cpwebassets.codepen.io/assets/embed/ei.js"/>
참고 기사
아래 사이트에서 매개변수를 검색했습니다.
htps //w w. 쓰리아도 cs. 코 m/트토리아 l/스페 r/아피파기 나치온. HTML
Reference
이 문제에 관하여(swiper의 pagination에 0을 붙이고 표시하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dan___/items/c3480e41a3d43cde1f8e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
