swiper.js mobile touch slider plugin customizing / swiper.js api
swiper customizing
// options
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
scrollbar: '.swiper-scrollbar',
slidesPerView: 1,
keyboardControl: true,
autoplayDisableOnInteraction: false,
paginationClickable: true,
spaceBetween: 10,
freeMode: true,
})
swiper action
//next swipe
onSlideNextStart : function(swiper){
//console.log('next');
},
//prev swipe
onSlidePrevStart : function(swiper){
//console.log('prev');
},
//slide change
onSlideChangeStart : function(swiper){
var swiperNo = swiper.activeIndex;
console.log('change',swiperNo);
//loop 돌경우! 양끝 activeIndex error 문제
/*
마지막 슬라이드에서 오른쪽으로 스와이핑 : 첫번째로 오지만 index 값 = 마지막슬라이드 번호 +1
첫번째 슬라이드에서 왼쪽으로 스와이핑 : 끝으로 가지만 index값 = 0
swiperNo 가
슬라이드갯수 + 1 만큼일때 : 첫번째 버튼에 add
0일때 : 마지막 버튼에 add
*/
if(swiperNo == 6){
$('.goToSlide').removeClass('on');
$('.goToSlide').first().addClass('on');
}
if(swiperNo == 0){
$('.goToSlide').removeClass('on');
$('.goToSlide').last().addClass('on');
}
//? 아래 놓기
if(swiperNo == 1){
//console.log('111');
} else if(swiperNo = 2){
//console.log('222');
} else if(swiperNo = 3){
//console.log('333');
} else if(swiperNo = 4){
//console.log('444');
} else {
//console.log('555');
}
//slideTo 슬라이드 이동
var speed = 500
swiper.slideTo(0, speed);
loop 옵션 사용시 activeIndex error 가 있다.
swiper on dragging lock
스와이퍼 드래그 스크롤 락
스와이핑 중 전체 스크롤링 Lock!
//swiper1 on swiping wrap dragging Lock
onTouchStart : function(swiper){
swiperWrap.lockSwipes();
console.log("aa");
},
//swiper1 on swiping wrap dragging unLock
onTouchEnd : function(swiper){
swiperWrap.unlockSwipes();
}