JS / swiper 옵션 정리

 

swiper 선언

// 일반 swiper 설정 예시
const slide = new Swiper('#test-slide', {
  slidesPerView : 'auto',
  spaceBetween : 6, 
})

// 변수에 담아서 활용 예시
var slideSetting = {
  slidesPerView : 'auto',
  spaceBetween : 6,
  loop : false,
}
const slide = new Swiper('#test-slide', slideSetting)

 

swiper 옵션

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

 

swiper 이벤트 사용방법

/ 매개 변수로 사용시 swiper가 초기화 될 때 동작합니다.
var mySwiper = new Swiper('.swiper-container', {
  on : {
    init : function () {
      console.log('swiper 초기화 될때 실행');
    },
    imagesReady : function () { // 모든 내부 이미지가 로드 된 직후 이벤트가 시작됩니다.
      console.log('슬라이드 이미지 로드 후 실행');
    },
  },
};

// swiper가 초기화 된 후 동작합니다.
var mySwiper = new Swiper('.swiper-container', {
  // ...
};
mySwiper.on('init', function () {
  console.log('slide가 초기화 설정을 마친 후 실행');
});

 

 

https://lwygold.tistory.com/entry/swiper-%EC%98%B5%EC%85%98-%EC%A0%95%EB%A6%AC-parameters