Swiper

Swiper

하드웨어 가속 전환과 여러 기본 동작을 갖춘 슬라이드 라이브러리
Swiper

Swiper 설치

• NPM으로 설치
• CDN으로 설치
  - css / js 파일이 필요하다(압축버전인 min버전이 효율적)
• 직접 다운로드하여 설치

원하는 방법으로 설치하여 사용하면 된다!

구조

HTML 기본구조 설정

필수 class 요소(~7 버전)

swiper>swiper-wrapper>swiper-slide

<!-- Slider 메인 -->
<div class="swiper">
  <!-- Slides를 감싸는 요소-->
  <div class="swiper-wrapper">
    <!-- Slides 요소 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- 추가할 부가적 요소 삽입 -->
</div>

부가적 요소

  <!-- If we need pagination -->
  <!-- 페이지 순서 원형 이미지 제공 -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <!-- 슬라이더 좌우버튼 제공 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <!-- 슬라이더 스크롤러 제공 -->
  <div class="swiper-scrollbar"></div>

JS 옵션 설정 예시

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical', // 수직 슬라이드
  loop: true, // 반복 재생 여부
  autoplay: true, // 자동 재생 여부

  // If we need pagination // 페이지 순서 원형 이미지
  pagination: {
    el: '.swiper-pagination', // 요소 정의
    clickable: true // 클릭 가능 여부
  },

  // Navigation arrows 슬라이드 이전/다음 버튼 사용 여부
  navigation: {
    nextEl: '.swiper-button-next', // 다음 버튼 선택자
    prevEl: '.swiper-button-prev', // 이전 버튼 선택자
  },

  // And if we need scrollbar 슬라이드바 사용 여부
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

// 

옵션 정리

  direction: 'vertical', // 슬라이드 방향 (기본값은 'horizontal')
  autoplay:  { // 자동 재생 여부 (true / false,)
  	delay: number // 슬라이드 시간 설정
    pauseOnMouseEnter: boolean // 마우스가 스와이퍼 컨테이너 위에 올라오면 자동재생 여부
    stopOnLastSlide: boolean // 마지막 슬라이드에 도달하면 자동재생이 중지(반복 모드에서는 효과 없음).
  }
  loop: boolean // 반복 재생 여부 (true / false)
  slidesPerView: number, // 한 번에 보여줄 슬라이드 개수
  spaceBetween: number, // 슬라이드 사이 여백
  centeredSlides: boolean, // 중간 슬라이드가 가운데 보이기
  breakpoints:{ // 미디어쿼리
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    }
  }
  pagination: {
    el: '.swiper-pagination', // 요소 정의
    clickable: boolean // 클릭 가능 여부 (true / false)
    type : 'bullets', // 버튼 모양 (progressbar / bullets / fraction)
  },
    
  navigation: {
    nextEl: '.swiper-button-next', // 다음 버튼 선택자
    prevEl: '.swiper-button-prev', // 이전 버튼 선택자
  },
    
  scrollbar: {
    el: '.swiper-scrollbar', // 요소 정의
    dragSize: number // 스크롤바 요소 크기(px)
    draggable: boolean // 스크롤바를 드래그할 수 있도록 설정
  }

미디어쿼리

가로 사이즈와 비율로 설정이 가능하다.

  breakpoints:{ // 미디어쿼리
    // 가로 사이즈가 320 이하일 때
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // 기로 사이즈가 480 이하일 때
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    }
// -----------------------------
    breakpoints: {
    '@0.75': { 
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },