[js]swiper 스와이퍼 기본 구조 및 속성

See the Pen swiper 기본 by sangmok-ye (@sangmok-ye) on CodePen.

// 슬라이드 뷰 갯수 설정
slidesPerView: 1 

// 슬라이드 간 여백 설정
spaceBetween: 10 

// 반응형 슬라이드 설정
breakpoints: { 

  0<window.width()<767,

  768: {

    768<window.width()<1023
  },  

  1024: {

    1024<window.width()
  },

}  

// pager 페이저 설정
pagination: {
  el: ".swiper-pagination",
  clickable: true, 
}

 

// 스크롤바 설정 *loop에서는 사용 불가

scrollbar:{

  el:".swiper-scrollbar",

  draggable : true

}

 

// btn 설정
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
}

// 슬라이드 자동 재생 → 2초마다 슬라이드 (1초 = 1000)
autoplay: {
  delay: 2000,
} 

// 슬라이드 넘어가는 속도 
speed: 1000

// 무한 슬라이드
loop : true 

// 드래그 슬라이드 금지
allowTouchMove : true

 

// 터치 비율 조정 (숫자가 높을수록 슬라이드에 필요한 동작이 줄어듦)

> 슬라이드를 하기위해 100px의 이동이 필요하다면 수치가 줄어듬

> touchRatio: 0일 때 사이드의 흰 여백이 안보이게 됨

touchRatio: 0,

// 슬라이드 방향 설정 - horizontal(가로) 기본
direction: 'horizontal' or 'vertical'

// 슬라이드 효과 설정 - slide 기본
effect : 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'

//pagination 설정 - bullets 기본
  pagination: {
    el: '.swiper-pagination',
    type : 'bullets' or 'fraction' or 'progressbar' or 'custom'
  }

// active 센터 정렬
centeredSlides: true,    

 // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
loopAdditionalSlides : 1,

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

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

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

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

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

// 슬라이드가 1개 일 경우 페이저 및 버튼 숨김
watchOverflow : true,

 

// 슬라이드 앞뒤로 여백

slidesOffsetBefore:30,

slidesOffsetAfter:30

 

// 스와이퍼 두개 연동

See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.