[JS] Swiper

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper에는 다양한 옵션들이 있습니다.

옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,

아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.

 

사용 방법

1. 사이트 접속해서 다운 받기
2. alpha가 아닌 파일 다운 받기
3. 사이트 링크로 파일 불러오기

<link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

    4. 기본 레이아웃 추가

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
</div>

swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,

swiper-slide가 슬라이드의 내용이 됩니다.

 

   5. JavaScript에서 슬라이드 기능을 구현합니다.

슬라이드 옵션 예제

/**

* 슬라이드 요소 관리

*/

// 자바스크립트에서 Swiper 초기화
new Swiper('.notice-line .swiper-container', {

  direction: 'vertical', // 수직 슬라이드

  autoplay: true, // 자동 재생 여부

  loop: true // 반복 재생 여부

})

new Swiper('.promotion .swiper-container', {

  // direction: 'horizontal', // 수평 슬라이드

  autoplay: { // 자동 재생 여부

    delay: 5000 // 5초마다 슬라이드 바뀜

  },

  loop: true, // 반복 재생 여부

  slidesPerView: 3, // 한 번에 보여줄 슬라이드 개수

  spaceBetween: 10, // 슬라이드 사이 여백

  centeredSlides: true, // 1번 슬라이드가 가운데 보이기

  pagination: { // 페이지 번호 사용 여부

    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자

    clickable: true // 사용자의 페이지 번호 요소 제어 가능 여부

  },

  navigation: { // 슬라이드 이전/다음 버튼 사용 여부

    prevEl: '.promotion .swiper-prev', // 이전 버튼 선택자

    nextEl: '.promotion .swiper-next' // 다음 버튼 선택자

  }

})

new Swiper('.awards .swiper-container', {

  // direction: 'horizontal', // 수평 슬라이드

  autoplay: true, // 자동 재생 여부

  loop: true, // 반복 재생 여부

  spaceBetween: 30, // 슬라이드 사이 여백

  slidesPerView: 5, // 한 번에 보여줄 슬라이드 개수

  // slidesPerGroup: 5, // 한 번에 슬라이드 할 개수(전체 개수로 나뉘어야 함)

  navigation: { // 슬라이드 이전/다음 버튼 사용 여부

    prevEl: '.awards .swiper-prev', // 이전 버튼 선택자

    nextEl: '.awards .swiper-next' // 다음 버튼 선택자

  }

})