메인 비쥬얼 슬라이드 머무르는 시간
관련링크
본문
function slidewow() {
new WOW({
boxClass: 'slidewow'
}).init();
}
slidewow();
var bar = new ProgressBar.Circle(timer, {
strokeWidth: 3,
duration: 4000,
color: '#FFFFFF',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});
function slider() {
var winW = window.innerWidth; //화면 가로사이즈
var swiper = undefined;
var viewNum = ''; //슬라이드 개수 (옵션)
var loopChk = ''; //무한반복 체크
var slideNum = $('.visual .swiper-container .swiper-slide').length //슬라이드 총 개수
var slideInx = 0; //현재 슬라이드 index
//디바이스 체크
var winWChk = '';
$(window).on('load resize', function () {
winW = window.innerWidth;
if (winWChk != 'mo' && winW <= 768) { //모바일 버전으로 전환할 때
winWChk = 'mo'
sliderAct();
}
if (winWChk != 'pc' && winW >= 769) { //PC 버전으로 전환할 때
winWChk = 'pc'
sliderAct();
}
})
function sliderAct() {
//슬라이드 초기화
if (swiper != undefined) {
swiper.destroy();
swiper = undefined;
}
//slidesPerView 옵션 설정
if (winW > 768) { //PC 버전
viewNum = 5;
} else { //mobile 버전
viewNum = 2.3;
}
//loop 옵션 체크
if (slideNum > viewNum) {
loopChk = true;
} else {
loopChk = false;
}
visualSwiper = new Swiper(".visual .swiper-container", {
slidesPerView: viewNum,
initialSlide: slideInx,
spaceBetween: 10,
// loop: loopChk,
loop: true,
speed: 1000,
// on: {
// activeIndexChange: function () {
// slideInx = this.realIndex; //현재 슬라이드 index 갱신
// }
// },
effect: "fade",
fadeEffect: {crossFade: false},
loopAdditionalSlides: 1,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
on: {
init: function () {
bar.animate(1.0);
},
},
pagination: {
el: ".main .visual .swiper-pagination",
clickable: true,
},
navigation: {
nextEl: '.main .visual .swiper-button-next',
prevEl: '.main .visual .swiper-button-prev',
},
}),
visualSwiper.on('slideChange', function () {
// function slidewow() {
// new WOW({
// boxClass: 'slidewow'
// }).init();
// }
// slidewow();
if ($(".play").hasClass('off')) {
bar.set(0)
bar.animate(1.0, {
duration: 4500
})
} else {
bar.set(0)
bar.animate(0)
}
});
visualSwiper.on('sliderMove', function () {
if ($(".play").hasClass('off')) {
bar.set(0)
bar.animate(1.0, {
duration: 4000
})
} else {
bar.set(0)
bar.animate(0)
}
});
}
}
slider();
$(".btn").click(function (e) {
if ($(".play").hasClass('off')) {
$(".play").removeClass('off');
$(".pause").addClass('off');
visualSwiper.autoplay.stop();
bar.set(0)
bar.stop();
} else {
$(".pause").removeClass('off');
$(".play").addClass('off');
visualSwiper.autoplay.start();
bar.animate(1.0);
}
});
첫페이지랑 첫번째 이후 페이지들 머무르는 시간이 다르게 나와요~
첫페이지는 좀 짧고 두번째부터는 빠르고
또 한판 다 돌아가면 첫페이지도 정상적으로 맞춰지고 ㅠㅠ
이거 봐주실 분~~
답변 2
on: {
init: function () {
bar.animate(1.0);
},
},
bar.animate(1.0) 에서 1.0을 0으로 바꿔보시는건요?
이건 어떠실까요?
function sliderAct() {
// 슬라이드 초기화
if (swiper != undefined) {
swiper.destroy();
swiper = undefined;
}
// 슬라이드 머무는 시간 설정
var slideDelay = 4000;
// ...
visualSwiper = new Swiper(".visual .swiper-container", {
// ...
autoplay: {
delay: slideDelay,
disableOnInteraction: false,
},
// ...
});
// 타이머 초기화
bar.animate(1.0, {
duration: slideDelay,
});
// ...
}
답변을 작성하시기 전에 로그인 해주세요.
