안녕하세요
swiper slider 를 적용중인데요
pagination 에 효과를 주고있습니다.
active 상태일때 delay 시간에 따라 좌측에서 우측으로 애니메이션을 주고 있습니다.
(슬라이드 노출시간동안 버튼색이 채워지는..)
소스는 아래와 같습니다.
Copy
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="1000" data-type="img"><img src="img/slide1.jpg"></div>
<div class="swiper-slide" data-swiper-autoplay="2000" data-type="img"><img src="img/slide2.jpg"></div>
<div class="swiper-slide"data-swiper-autoplay="3000" data-type="img"><img src="img/slide3.jpg"></div>
</div>
<div class="progressbar-pagination">
<div class="swiper-pagination"></div>
</div>
</div>
<script>
var swiper = new Swiper(".mySwiper", {
speed: 350,
loop: true,
autoplay: {
disableOnInteraction: false,
},
mousewheel: false,
keyboard: {
enabled: true
},
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
var delay = this.slides[index+1].dataset.swiperAutoplay;
return '<div class="' + className + '" data-delay="'+delay+'"></div>';
},
},
on: {
paginationUpdate: function (sw,el) {
$(el).find('.swiper-pagination-bullet').html('');
var bar = $(el).find('.swiper-pagination-bullet-active');
$('.swiper-progressbar .bar').stop().css({width: 0}).animate({
width: 100+'%'
}, parseInt($(bar).data('delay')));
$('.swiper-pagination-bullet').html('');
bar.html('<span class="bar"></span>');
bar.find('.bar').stop().css({width: 0}).animate({
width: 100+'%'
}, parseInt($(bar).data('delay')));
}
}
});
</script> renderBullet: function (index, className) {
var delay = this.slides[index+1].dataset.swiperAutoplay;
return '<div class="' + className + '" data-delay="'+delay+'"></div>';
},
이 부분만 빼면 pagination 부분은 작동이 잘되는데
슬라이드 노출시간동안 버튼색이 채워지는 애니메이션이 작동되질 않습니다.
혹시 알고계신 고수님 있으시면 가르침 부탁드립니다. ㅠ
감사합니다.
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
2023-05-26 (금) 11:44:26
this.slides[index+1]에서 +1을 빼보세요
Copy
var delay = this.slides[index].dataset.swiperAutoplay;답변에 대한 댓글 1개
그누배우자
2023-05-26 (금) 16:11:28
정말감사합니다. 단번에 해결되었네요 ㅠ 커피라도 한잔 사고싶은 마음입니다. 감사합니다!
답변을 작성하려면 로그인이 필요합니다.