Swiper 옵션 정리
그동안 늘 캐러셀을 구현하기 위해 swiperjs 라이브러리를 사용했었다. 다행히도 입사한 회사에서도 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 이하의 크기에서 옵션 값 } } })
추가옵션
freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
autoHeight : true, // 현재 활성 슬라이드높이 맞게 높이조정
a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능)
resistance : false, // 슬라이드 터치 저항 여부
slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
allowTouchMove : true, // (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
slidesOffsetAfter : number,
초기화 설정
초기화 설정 방법은 2가지가 있다. swiper가 초기화 될 때, 초기화 된 후 설정을 할 수가 있다. on을 매개 변수로 전달 할 시에 swiper가 생성될 때 즉 초기화 될 때 설정을 해줄 수가 있고 다른 방법으로 아래 코드처럼 따로 사용 시에는 swiper가 이미 만들어지고 나서 동작하기 때문에 초기화 된 후 동작한다. 초기화 설정과 관련하여 수많은 설정이 있기 때문에 아래 참고사이트에서 필요한 부분을 찾아서 사용하는 것이 좋다.
undefined
// 매개 변수로 사용시 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가 초기화 설정을 마친 후 실행'); });
## 반응형 설정
swiper는 breakpoints라는 객체로 반응형 설정이 가능합니다. 아래 설정은 브라우저의 가로 크기가 768px 이하 일 때 동작하는 예시입니다.
> ```javascipt
breakpoints : { // 반응형 설정이 가능 width값으로 조정
768 : {
slidesPerView : 1,
},
},
>
> //5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
> spaceBetween: 10,
> breakpoints: {
'@0.75': {
slidesPerView: 2,
spaceBetween: 20,
},
'@1.00': {
slidesPerView: 3,
spaceBetween: 40,
},
'@1.50': {
slidesPerView: 4,
spaceBetween: 50,
},
}
});
> ```
## 메소드
swiper이름.메소드() 형식으로 사용할 수 있다.
> ```javascript
// ex) mySlider.autoplay.start()
.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
.autoplay.start(); // 자동 재생 시작
.autoplay.stop(); // 자동 재생 정지
.destroy() // 슬라이드 제거
다음 ,이전 슬라이드 미리 보기
undefined
//방법 1
var swiper = new Swiper('.m_swiper', {
loop: true,
loopFillGroupWithBlank: true,
spaceBetween: 8, // 슬라이드 간격
slidesPerView: 1.08, // 한번에 보이는 슬라이드 갯수
centeredSlides: true, // 양쪽 미리보기
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
});
//방법 2
slidesPerView: ‘auto’,
.swiper slide {width: 93%} 로 가로값 강제하기
## 딜레이 없이 smooth 하게 이미지 넘기기
> ```javascript
.swiper-wrapper {
transition-timing-function: linear;
}
>
var swiper = new Swiper(".swiper", {
loop: true,
centeredSlides: true,
speed: 7000,
autoplay: {
delay: 0,
disableOnInteraction: false
},
slidesPerView: 'auto',
});
> ```