무한반복 안되게요~
본문
슬라이드 무한반복 안되게 하고 싶은데
var loopChk = 'false'; //무한반복 체크 이렇게 하니깐 안되더라구요~
머라고 써야하나유?
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 = '0'; //슬라이드 개수 (옵션)
var loopChk = 'false'; //무한반복 체크
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);
}
});
답변 3
https://shadesign.tistory.com/entry/swiper-slide-%EC%B4%9D%EC%A0%95%EB%A6%AC%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%81%EC%9A%A9-%EC%98%B5%EC%85%98
참고 하시고...
옵션 중에 slidesPerView 라는 옵션이 존재 하는데 이건 한 슬라이드에 몇개를 보여줄 것인지 이며
'auto' 나 1,2,3,4, 숫자로 표기 가능하며...
loop : false, // 슬라이드 반복 여부
loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
이 존재 합니다.
작동중인 사이트링크를 공유해주세요.
loop: true, 이부분을
loop: false 로 변경해야 할거 같고 그외에 따져볼것도 있을거 같은데....
//loop 옵션 체크
if (slideNum > viewNum) {
loopChk = true;
} else {
loopChk = false;
}
이부분을 지우시거나 주석 하신후
loopChk = false; 이것만 남도록 하시고 위쪽은 변수선언이라 의미가 없습니다.
답변을 작성하시기 전에 로그인 해주세요.
