1. Swiper

01. Swiper란?

Swiper.js란 모바일 및 데스크탑에 사용하기 적합한 오픈소스 Javascript 라이브러리이다. 간단한 HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있다.

특징

• 모바일 및 데스크탑 모두 호환
• 반응형 웹사이트에 최적화
• 터치 스와이프 이벤트를 기반으로한 슬라이드쇼 및 스와이퍼 기능을 지원
• SCC3 기반으로 애니메이션을 지원
• 다양한 옵션을 제공해 사용자가 자유롭게 슬라이드쇼 및 스와이퍼를 커스터마이징 가능

02. 사용방법

CDN을 이용한 방법

<!-- css -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- js -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

강의에서 다른 라이브러리를 설치할 떄와 마찬가지로, main.js 파일보다 먼저 load 될 수 있도록 main.js 가 작성된 부분보다 윗쪽에 작성한다.

03. 기본 설정

HTML에 Swiper 컨테니너 생성

이 부분이 좀 중요한 것 같다. 강의에서는 swiper 6버전을 사용했는데, 가장 lastest 버전인 11버전과 비교했을때 큰 변화는 없지만, class 부분에서 조금 다른점이 존재했다.

1. Swiper 6

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <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>
  <!-- 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>
</div>