All Articles

Swiper js Custom

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();
}