Swiper progressbar 시간 질문이요!!
관련링크
본문
https://codepen.io/ndolphin/pen/OJBKbgp
위 링크에 예제 만들어놨습니다.
.pagination 에 progressbar 를 만들었는데.
게이지가 끝까지 다 차도 슬라이드 되지 않고 한참동안 멈춰있다가 변합니다.
이게 delay 가 3000일때는 정상적으로 progressbar 에 맞춰 잘 움직이는데.
딜레이 시간을 7초정도로 여유롭게 주고 싶습니다. progressbar 게이지 차는 시간을 좀 더디게 할수 없을까요?
var mainSwiper1 = new Swiper('.swiper', {
effect: 'fade',
slidesPerView: 1,
speed: 2000,
loop: true,
watchSlidesProgress: true,
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
init() {
this.el.addEventListener("mouseenter", () => {
this.autoplay.stop();
});
this.el.addEventListener("mouseleave", () => {
this.autoplay.start();
});
},
},
});
답변 2
.swiper .swiper-pagination-bullet-active::before
속성에서
animation: slide-progress 3s cubic-bezier(0.3, 0, 0.3, 1) forwards;
이부분이 애니메이션을 나타내는 부분인데 저기 저 3s를
animation: slide-progress 7s cubic-bezier(0.3, 0, 0.3, 1) forwards;
이렇게 바꾸시면 됩니다.
이것도 참고를 해보세요~
var mainSwiper1 = new Swiper('.swiper', {
effect: 'fade',
slidesPerView: 1,
speed: 2000,
loop: true,
watchSlidesProgress: true,
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
init() {
this.el.addEventListener("mouseenter", () => {
this.autoplay.stop();
});
this.el.addEventListener("mouseleave", () => {
this.autoplay.start();
});
},
progress() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * 0.5;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".progressbar").style.transform =
"translateX(" + innerTranslate + "px)";
}
},
},
});
progress() 함수가 게이지의 움직임을 담당합니다.
만약 게이지의 움직임을 더 느리게 하려면 innerTranslate 값을 조절하면 됩니다.