SwiperJS

let swiper = new Swiper('#id', {
	slidesPerView : 보여질 개수,
	spaceBetween : 아이템 사이 간격,
	slidesPerGroup : 한번에 슬라이딩될 개수,
  centeredSlides: true,    //센터모드
	threshold:100, //마우스 스와이프 민감도
	autoplay:{
		delay: 2500, // 시간 설정
	  disableOnInteraction: false, // false-스와이프 후 자동 재생
	  loop: 무한반복 할지말지,
	},
	navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
	},
	pagination : {   // 페이저 버튼 사용자 설정
	  el : '.pagination',  // 페이저 버튼을 담을 태그 설정
    clickable : true,  // 버튼 클릭 여부
    type : 'bullets', // 버튼 모양 결정 "bullets", "fraction" 
    renderBullet : function (index, className) {  // className이 기본값이 들어가게 필수 설정
	    return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
    },
    renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
	    return '<span class="' + currentClass + '"></span>' + '<span class="' + totalClass + '"></span>';
    }
  },
	scrollbar:{
		el : '선택자',
        draggable: 스크롤바 이동으로 스와이프가 가능하게 할지, 
		dragSize: 스크롤바 크기,
    },
   	a11y: { // 웹접근성 
		enabled: true,
		prevSlideMessage: '이전 슬라이드',
		nextSlideMessage: '다음 슬라이드',   
		slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
	},
  breakpoints:{
  	280: {
      //280px 이하의 크기에서 옵션 값 
    },
    768 : {
    	//768px 이하의 크기에서 옵션 값 
    },
    1024 : {
		  //1024px 이하의 크기에서 옵션 값 
    }
  }
})
		
	/*
	* slidePrevTransitionStart : 이전 클릭시 
	* slidePrevTransitionEnd : 이전 클릭 슬라이드 이동 후 
	* slideNextTransitionStart : 다음 클릭시 
	* slideNextTransitionEnd : 다음 클릭 슬라이드 이동 후 
	*/
	swiper.on('slidePrevTransitionStart', function(e){
		if( e.activeIndex == 1){ //활성화 된 index가 1일경우 
			addSlide(firstNum,'prev'); 
		}
	});
	
	function addSlide(num,move){
		swiper.slideTo(1,0); // 이동할 슬라이드 index,이동시간(0 인경우 바로이동)
		swiper.update(); //슬라이드 업데이트 
	}