[JS 플러그인] Swiper (스와이퍼 슬라이드) 사용법

 

 

1. 스와이퍼 슬라이드 사이트 접속

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

2. 메인 > Get Started 클릭

 

3. CDN 연결 또는 swiper 플러그인 다운로드

- CDN 연결

 

- swiper 플러그인 다운로드 후 파일연결

https://www.jsdelivr.com/package/npm/swiper?tab=files

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

 

 

 

 

 

4. Demos 필요한 슬라이드 찾기

 

 

 

5. 원하는 Swiper Slide 선택 후 Core 클릭

필요한 소스와 Preview를 확인

 

 

---

 

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

 

 

Swiper 추가설정

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 반응형 설정

breakpoints : { // 반응형 설정이 가능 width값으로 조정
  768 : {
    slidesPerView : 1, //레이아웃 뷰 개수
    spaceBetween: 10, //위 slidesPerview 여백
  },
 1024 : {
    slidesPerView : 2, //레이아웃 뷰 개수
    spaceBetween: 20, //위 slidesPerview 여백
  },
},


//"비율"(너비 / 높이)로 설정
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 초기화 설정

// 매개 변수로 사용시 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가 초기화 설정을 마친 후 실행');
});

 

※ observer: true, observeParents: true 해당 부모, 해당 요소를 감지하여 스와이퍼 초기화

 

Swiper 장단점

- 장점

1. 쉬운 사용성 : Swiper.js는 간단한 API를 제공하여 쉽게 구성하고 사용할 수 있습니다. 설정이 간단하며, 다양한 옵션을 통해 사용자 정의할 수 있습니다.
2. 모바일 친화적 : Swiper.js는 터치 이벤트를 지원하여 모바일 기기에서 자연스럽게 작동합니다. 따라서 모바일 애플리케이션 및 웹사이트에서 매우 유용합니다.
3. 다양한 슬라이드 형식 : Swiper.js는 슬라이드, 페이드, 큐브 및 기타 다양한 슬라이드 형식을 지원합니다.
4. 레스폰시브 디자인 : Swiper.js는 반응형 디자인을 지원하여 다양한 디바이스 및 화면 크기에 맞게 슬라이드를 조정할 수 있습니다.

 

- 단점

1. 초기 로딩 시간 : Swiper.js는 JavaScript 라이브러리이므로 초기 로딩 시간이 길어질 수 있습니다. 특히, 많은 이미지나 컨텐츠가 있는 경우 더 큰 부하가 발생할 수 있습니다.
2. 기능 과부하 : 모든 프로젝트에 Swiper.js를 사용할 필요는 없습니다. 작은 프로젝트나 단순한 슬라이드가 필요한 경우에는 너무 많은 기능이 제공되어 비효율적일 수 있습니다.
3. 브라우저 호환성 문제 : 일부 오래된 브라우저에서는 Swiper.js가 완벽하게 작동하지 않을 수 있습니다. 이는 모바일 브라우저 및 데스크톱 브라우저 모두에 해당됩니다.

 

 

 

 

swiper를 이용한 다양한 예시도 만들어볼께요!