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가 이미 만들어지고 나서 동작하기 때문에 초기화 된 후 동작한다.
초기화 설정과 관련하여 수많은 설정이 있기 때문에 아래 참고사이트에서 필요한 부분을 찾아서 사용하는 것이 좋다.

// 매개 변수로 사용시 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 이하 일 때 동작하는 예시입니다.

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이름.메소드() 형식으로 사용할 수 있다.

// ex) mySlider.autoplay.start()
.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
.autoplay.start(); // 자동 재생 시작
.autoplay.stop(); // 자동 재생 정지
.destroy() // 슬라이드 제거

다음 ,이전 슬라이드 미리 보기

//방법 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 하게 이미지 넘기기

.swiper-wrapper {
    transition-timing-function: linear;
 }
    
    var swiper = new Swiper(".swiper", {
        loop: true,
        centeredSlides: true,
        speed: 7000,
        autoplay: {
            delay: 0,
            disableOnInteraction: false
        },
        slidesPerView: 'auto',
    });