스와이퍼 기능 관련해서 질문합니다.
본문
안녕하세요 스와이퍼 관련해서 질문 좀 드릴려고 합니다.
<div class="banner-box">
<div class="banner_box_inner">
<div id="Slider1" class="">
<div class="Slider_btn">
<div class="btnWrap">
<a href="javascript:void(0);" class="swiper-button swiper-button-prev"><span class="sr_only">이전 슬라이드 가기</span></a>
<a href="javascript:void(0);" class="swiper-button swiper-button-stop" data-name="Slider1"><span class="sr_only">슬라이드 정지</span></a>
<a href="javascript:void(0);" class="swiper-button swiper-button-next"><span class="sr_only">다음 슬라이드 가기</span></a>
<div class="page"></div>
</div>
</div>
<div class="swiper-wrapper" id="mainBanner">
</div>
</div>
</div>
</div>
이런 구조의 html이 있고
var Slider1 = new Swiper("#Slider1", {
slidesPerView: 1,
loop: true,
loopAdditionalSlides : 1,
autoplay: {delay: 5000},
pagination: {
el: ".Slider_btn .page",
type: "fraction",
},
navigation: {
nextEl: ".Slider_btn .swiper-button-next",
prevEl: ".Slider_btn .swiper-button-prev",
},
});
$(function(){
$(document).on('click','.swiper-button', function(){
var $obj = eval($(this).data('name'));
if($(this).hasClass('swiper-button-stop')){
$obj.autoplay.stop();
$(this).find('.sr_only').text('슬라이드 재생');
$(this).removeClass('swiper-button-stop');
$(this).addClass('swiper-button-play');
}else{
$obj.autoplay.start();
$(this).find('.sr_only').text('슬라이드 정지');
$(this).removeClass('swiper-button-play');
$(this).addClass('swiper-button-stop');
}
})
이렇게 스와이퍼 js를 구성했습니다
근데 문제가 생기는 부분은
swiper-pagination
저 다음 버튼을 눌렀을때 숫자가 슬라이드 갯수와 상관없이 무한대로 증가합니다.
loop:true 의 옵션때문에 그런것 같은데
이걸 js로 통제할수 있는 방법이 있을까요?
많이 모자랍니다 잘 부탁드립니다!
알려주시면 열심히 공부해보겠습니다
답변 1
* realIndex를 활용한 커스텀 pagination (pagination 부분 수정)
var Slider1 = new Swiper("#Slider1", {
slidesPerView: 1,
loop: true,
loopAdditionalSlides: 1,
autoplay: {delay: 5000},
pagination: {
el: ".Slider_btn .page",
type: "custom",
renderCustom: function (swiper, current, total) {
return (swiper.realIndex + 1) + ' / ' + total;
}
},
navigation: {
nextEl: ".Slider_btn .swiper-button-next",
prevEl: ".Slider_btn .swiper-button-prev",
},
});
