스와이퍼 기능 관련해서 질문합니다.
안녕하세요 스와이퍼 관련해서 질문 좀 드릴려고 합니다.
이런 구조의 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-paginationhttp://sir.kr/data/editor/2506/1893379372_1748854392.5446.png" width="177" />
저 다음 버튼을 눌렀을때 숫자가 슬라이드 갯수와 상관없이 무한대로 증가합니다.
loop:true 의 옵션때문에 그런것 같은데
이걸 js로 통제할수 있는 방법이 있을까요?
많이 모자랍니다 잘 부탁드립니다!
알려주시면 열심히 공부해보겠습니다
답변 1개
* realIndex를 활용한 커스텀 pagination (pagination 부분 수정)
</p>
<p>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",
},
});</p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인