스와이퍼 탭안에서 페이지넘버가 이상해요ㅠㅠ
관련링크
본문
보시면 첫번째 탭에서는 1/4가 잘나오는데 2번째에서도 1/4가 나와야하는데 저렇게 나오네요ㅠㅠ
스와이퍼 클래스를 다르게해도 계속 그래요....
링크 http://smartj.gwj.co.kr/kiosk/1_1.php
왜이럴까요ㅠㅠㅠㅠㅠ
답변 1
스와이퍼 쓰는게 같은 변수로 쓰셔서 그런데 따로 분리하셔서 쓰시면되요
liruo님 답변 감사합니다ㅠㅠ
그런데 제 생각에는 변수도 다르게 했따고 생각하는데 죄송하지만 코드좀 봐주실수 있을까요??ㅠㅠ
1번째탭
// visual swiper
var visual_swiper = new Swiper('.visual_swiper', {
loop: true,
observer: true,
observeParents: true,
loopedSlides: 999,
speed: 800,
watchSlidesProgress: true,
autoplay:false,
navigation: {
nextEl: '.visual_next',
prevEl: '.visual_prev',
},
on: {
slideChangeTransitionStart: function() {
var $this = this;
var index = $this.realIndex + 1,
progressWidth = $('.visual_progress').innerWidth(),
realCount = $this.slides.length - ($this.loopedSlides * 2),
currentWidth = progressWidth / realCount;
$('.visual_bar').css({
'width': currentWidth * index,
});
if (realCount >= 10) {
$('.visual_total').html(realCount);
} else {
$('.visual_total').html('0' + realCount);
}
if (index >= 10) {
$('.visual_current').html(index);
} else {
$('.visual_current').html('0' + index);
}
},
},
});
$('.start').on('click', function(){
visual_swiper.autoplay.start();
return false;
})
$('.stop').on('click', function(){
visual_swiper.autoplay.stop();
return false;
})
2번쨰탭
// visual swiper
var visual_swiper02 = new Swiper('.visual_swiper02', {
loop: true,
observer: true,
observeParents: true,
loopedSlides: 999,
speed: 800,
watchSlidesProgress: true,
autoplay:false,
navigation: {
nextEl: '.visual_next02',
prevEl: '.visual_prev02',
},
on: {
slideChangeTransitionStart: function() {
var $this = this;
var index01 = $this.realIndex + 1,
progressWidth = $('.visual_progress02').innerWidth(),
realCount01 = $this.slides.length - ($this.loopedSlides * 2),
currentWidth = progressWidth / realCount01;
$('.visual_bar02').css({
'width': currentWidth * index01,
});
if (realCount01 >= 10) {
$('.visual_total02').html(realCount01);
} else {
$('.visual_total02').html('0' + realCount01);
}
if (index01 >= 10) {
$('.visual_current02').html(index01);
} else {
$('.visual_current02').html('0' + index01);
}
},
},
});
$('.start02').on('click', function(){
visual_swiper02.autoplay.start();
return false;
})
$('.stop02').on('click', function(){
visual_swiper02.autoplay.stop();
return false;
})
