무한반복 안되게요~ 채택완료
홀로그램웹
2년 전
조회 1,950
슬라이드 무한반복 안되게 하고 싶은데
var loopChk = 'false'; //무한반복 체크 이렇게 하니깐 안되더라구요~
머라고 써야하나유?
</p>
<p>
function slidewow() {
new WOW({
boxClass: 'slidewow'
}).init();
}
slidewow();</p>
<p> var bar = new ProgressBar.Circle(timer, {
strokeWidth: 3,
duration: 4000,
color: '#FFFFFF',
trailColor: '#eee',
trailWidth: 1,
svgStyle: null
});</p>
<p>
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</p>
<p> //디바이스 체크
var winWChk = '';
$(window).on('load resize', function () {
winW = window.innerWidth;
if (winWChk != 'mo' && winW <= 768) { //모바일 버전으로 전환할 때
winWChk = 'mo'
sliderAct();
}</p>
<p> if (winWChk != 'pc' && winW >= 769) { //PC 버전으로 전환할 때
winWChk = 'pc'
sliderAct();
}
})</p>
<p> function sliderAct() {
//슬라이드 초기화
if (swiper != undefined) {
swiper.destroy();
swiper = undefined;
}</p>
<p> //slidesPerView 옵션 설정
if (winW > 768) { //PC 버전
viewNum = 5;
} else { //mobile 버전
viewNum = 2.3;
}</p>
<p> //loop 옵션 체크
if (slideNum > viewNum) {
loopChk = true;
} else {
loopChk = false;
}</p>
<p> 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',
},
}),</p>
<p> 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
})</p>
<p> } else {
bar.set(0)
bar.animate(0)
}</p>
<p>
});</p>
<p> visualSwiper.on('sliderMove', function () {
if ($(".play").hasClass('off')) {
bar.set(0)
bar.animate(1.0, {
duration: 4000
})
} else {
bar.set(0)
bar.animate(0)
}
});</p>
<p> }
}</p>
<p> slider();</p>
<p>
$(".btn").click(function (e) {
if ($(".play").hasClass('off')) {
$(".play").removeClass('off');
$(".pause").addClass('off');
visualSwiper.autoplay.stop();
bar.set(0)
bar.stop();</p>
<p> } else {
$(".pause").removeClass('off');
$(".play").addClass('off');
visualSwiper.autoplay.start();
bar.animate(1.0);
}
});
</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
2년 전
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, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
이 존재 합니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
작동중인 사이트링크를 공유해주세요.
loop: true, 이부분을
loop: false 로 변경해야 할거 같고 그외에 따져볼것도 있을거 같은데....
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인