스와이퍼 슬라이더 제이쿼리 설정코드 정리

기본 설정

 

slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
spaceBetween : 6, // 슬라이드 사이 여백
loop : false, // 슬라이드 반복 여부
loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
pagination : false, // pager 여부
autoplay : {  // 자동 슬라이드 설정 , 비 활성화 시 false
  delay : 3000,   // 시간 설정
  disableOnInteraction : false,  // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
},
navigation: {   // 버튼 사용자 지정
	nextEl: '.swiper-button-next',
	prevEl: '.swiper-button-prev',
},

 

 

---

 

추가 설정

상황에 따라 쉽게 슬라이드를 커스텀 할 수 있는 옵션 요소

 

freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.
a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!
resistance : false, // 슬라이드 터치에 대한 저항 여부 설정
slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
centeredSlides : true // true시에 슬라이드가 가운데로 배치
allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
slidesOffsetAfter : number, // 슬라이드 시작 부분 여백

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>';
  }
},

 

 

 

 

 

 

 

참고사이트 천재이신듯

 

https://velog.io/@function_dh/JavaScript-Swiper-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EA%B5%AC%ED%98%84

[JavaScript] Swiper 사용법 - 슬라이드 구현