swiper 총정리(작성 중)

odada·2023년 8월 24일

// 반응형 설정
var swiper = new Swiper('.swiper-container', {

slidesPerView: 1, //레이아웃 뷰 개수

spaceBetween: 10, //위 slidesPerview 여백

breakpoints: { //반응형 width

640: { //640 이상일 경우

slidesPerView: 2, //레이아웃 2 },

768: { slidesPerView: 3, }, 1024: { slidesPerView: 4, }, } });

//비율(가로/세로)가능

breakpoints: {

'@0.75': {

  slidesPerView: 2,

  spaceBetween: 20,

},

'@1.00': {

  slidesPerView: 3,

  spaceBetween: 40,

},

'@1.50': {

  slidesPerView: 4,

  spaceBetween: 50,

}

//옵션 설정

freeMode : false, // 슬라이드 넘길 때 위치 고정 여부

autoHeight : true, // 현재 활성 슬라이드높이 맞게 높이조정

a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능)

resistance : false, // 슬라이드 터치 저항 여부

slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동

allowTouchMove : true, // (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능

watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정

slidesOffsetBefore : number, // 슬라이드 시작 부분 여백

slidesOffsetAfter : number,

//초기화 설정

0개의 댓글