[Swiper.js] 스와이프, 슬라이드 적용하기 및 사용법 (옵션 정리)

 

다운로드

---

먼저 swiper.js파일을 프로젝트에 적용해야한다. 방법은 공식 문서에 보다 정확하게 나와 있으나 조금 덜어내어 정리하고자 합니다. 

 

 

공식 문서에 보면 npm install, CDN, Download assets 총 3가지 적용 방법이 있는데 각자 편한 방법으로 하면된다. 

 

1. npm install은 React, Vue, Angular 등 node가 깔리는 프로젝트에서 사용하면 될 것이고

2. CDN은 다운로드가 싫은 경우, 헤더에 선언을 하여 페이지가 불러와질 때 js파일을 가져온다고 보면 된다.

3. Download는 사용할 파일을 따로 다운로드 받아 프로젝트에 적용하는 것이고 이는 헤더 또는 사용하고자 하는 파일에서 불러와 사용하면 된다. 

 

저는 download를 하여 사용하고자 합니다. 

swiper CDN by jsDelivr - A free, fast, and reliable Open Source CDN

선언

---

먼저 Swiper 사용법 및 공식 문서 에 cdn 적용 방법을 보면 css파일과 min.js파일을 사용하는 것을 알 수 있다. 다운로드 사이트에서 원하는 버전의 js, css파일을 받아 원하는 경로에 넣어두시면 되고 각자 원하는 방법으로 설정하면 됩니다. 

<!-- swiper CDN 적용 방법 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<!-- 또는 -->

<!-- swiper 적용 -->
<script type="text/javascript" src="파일경로/swiper-bundle.min.js"></script>
<script type="text/javascript" src="파일경로/swiper-bundle.min.css"></script>

Swiper - The Most Modern Mobile Touch Slider

 

적용

---

공식 문서 그대로를 보면 이것 저것 설명이 있는데 간단하게 말하면 

 

본인이 원하는 부분에 해당 클래스명을 적용하면 된다.

<!-- Slider main container //여기 클래스 명은 꼭 swiper가 아니여도 좋지만...-->
<!-- swiper를 지정할 영역-->
<div class="swiper">

  <!-- 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 // 슬라이드를 움직일 버튼 / js에서 변경 가능 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar // 스크롤 영역 -->
  <div class="swiper-scrollbar"></div>
</div>

 

제일 중요한 건 swiper, swiper-wrapper, swiper-slide 이 세가지 부분이고 나머지는 뭐 선택 사항이다.

// js
const swiper_init = function () {
    new Swiper('.swiper', { // 설정하고자 한 영역의 class를 적기 
        // Options
        speed: 1000,
        autoplay: {
            delay : 5000,
            disableOnInteraction : false
        }
    })
}


// 다중일 경우

const swiper_init = function () {
	// document.querySelectorAll(".swiper").forEach(function (ele) {  // jQuery 싫으면
    jQuery(".swiper").each(function (index, ele) {
        new Swiper(ele, {
            // Options
            speed: 1000,
            autoplay: {
                delay : 5000,
                disableOnInteraction : false
            }
        })
    }
}

See the Pen Untitled by 정재준 (@ihistdxo-the-builder) on CodePen.

 

 

옵션 (Option)

---

공식 문서 API를 보면 자세히 나와있지만 자주 사용하는 api를 간략히 적어보자면

이름	타입(Type)	기본값(Default)	설명
allowSlideNext	boolean	true	다음 방향으로 스와이프를 활성/비활성화
allowSlidePrev	boolean	true	이전 방향으로 스와이프를 활성/비활성화
allowTouchMove	boolean	true	터치로 스와이프 활성/비활성화
autoHeight	boolean	false	true로 설정 시 높이를 활성 슬라이드 높이에 맞춤
direction	'horizontal' |  'vertical'	'horizontal'	방향
loop	boolean	false	무한 스와이프 활성/비활성
observeParents	boolean	false	Swiper 상위 요소에 대한 Mutation Observer 실행
observer	boolean	false	해당 Swiper에 대한 Mutation Observer 실행 (스타일 변경)
spaceBetween	string | number	0	슬라이드 간 사이의 거리 (px단위)/ 해당 슬라이드에 margin 확인!
speed	number	300	슬라이드가 넘어가는 시간 (ms단위) (애니메이션 속도)
slideNextClass	string	'swiper-slide-next'	다음 버튼으로 지정할 클래스
slidePrevClass	string	'swiper-slide-prev'	이전 버튼으로 지정할 클래스

등이 있다.

 

메서드나 프로퍼티를 확인하고자 한다면 https://swiperjs.com/swiper-api#methods--properties 로 확인하시면 됩니다!

 

 

Swiper - The Most Modern Mobile Touch Slider