swiper 슬라이드 질문입니다 ㅠㅠ
본문
<body>
<!-- Swiper -->
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div id = "page_number">1</div>
<script language = "javascript">
function SetPageNumber(nPageNumber)
{
document.getElementById("page_number").innerHTML = nPageNumber;
}
</script>
<!-- Swiper JS -->
<script src="../package/js/swiper.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
on: {
slideChangeTransitionEnd: function(){
alert(this.activeIndex);
SetPageNumber(this.activeIndex+1);
},
},
});
</script>
</body>
이 상황입니다 div를 추가하면 계속해서 숫자가 늘어나는데.. .
▼ 하단 영역처럼 나눠주고 싶은데 어떻게 해야 하나요 ㅠㅠ;;
참고한 페이지 https://swiperjs.com/demos/070-pagination-custom.html
도와주세요 ㅠㅠ
답변 1
https://swiperjs.com/demos/040-pagination-dynamic.html
이것이 비슷할 것 같습니다.
사진과 같이 똑같은 예는 없지만 ..
https://github.com/nolimits4web/Swiper/blob/master/demos/040-pagination-dynamic.html
코드를 참조로. 아니면 데모처럼 dot대신 번호로 변경해도 더 좋을 수도 있겠네요
