웹개발 - Front 관련

JS Library - Swiper.js (1) 개념, 사용방법, 속성들

jun098 2024. 3. 1. 14:55

Topic =  JavaScript 반응형 슬라이드 라이브러리 Swiper.js에 대해 학습해보기.

 

 

 

Swiper.js 개념

 

Swiper.js란?

Swiper.js는 모바일, 데스크탑에서 반응형 슬라이드 쇼 및 스와이퍼 기능을 간단한 HTML, CSS, JS 코드로 쉽게 구현할 수 있도록 해주는 오픈소스 라이브러리이다.

 

 

주요기능

  • 터치 스와이프 - 모바일 기기에서도 직관적인 슬라이드 조작 가능
    • touchstart 및 touchmove 이벤트 발생 시 터치 위치 정보를 기록, 터치 종료 시 touchend 이벤트 발생. 계산된 정보를 기반으로 슬라이드 이동 방향 및 거리 결정.
    • 기본적으로 부드러운 슬라이드 이동 애니메이션 적용. JS 코드로 다양한 옵션 설정을 통해 슬라이드 작동 방식 조정이 가능하다.
  • breakpoints, Media Query를 통한 반응형 디자인 지원
    • CSS 스타일을 화면 크기, 해상도, 방향 등에 따라 동적으로 제공하는 Media Query를 사용하여 다양한 화면 크기에 자동으로 적응하는 반응형 디자인 기능을 제공한다.
    • Swiper.js에서 제공하는 Swiper 특화된 breakpoints 속성으로 간편하게 다양한 레이아웃을 유연하게 대응하기 용이하다.
    • 다양한 슬라이드 개수를 화면 크기에 따라 설정, 슬라이드 간격 및 방향을 화면 크기에 따라 조정, 슬라이드 옵션 및 기능을 화면 크기에 따라 동적인 디자인을 간편하게 설정 할 수 있다.
    • ➡️ Media Query, breakpoints 각각 장단점 및 자세한 내용은 추가 게시글 작성 예정.
  • CSS3 애니메이션으로 부드러운 슬라이드 전환 효과
  • 다양한 플러그인을 제공하여 간편하게 기능 확장 가능이 용이
    • ➡️ 추후에 플러그인 게시글 작성 후 링크 추가 예정.

 

사용하기

 

[ 1. Swiper.js 라이브러리 설치 링크 ]

 

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

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

www.jsdelivr.com

 

 

[ 1-1. CDN ]

  • 해당 글에서는 기본 CDN을 적용할 것이므로 Type : Default 선택 후 버전 선택 후 전 코드 복사.
    • swiper@ 뒤의 숫자가 버전을 나타냄.
    • 버전 8 이전과 이후 버전은 작성하는 코드가 상이한 경우가 많다고 한다. 최신 버전을 사용해주도록 하자. 
  • HTML 파일 head 태그 안에서 아래와 같이 CDN 을 통해 Swiper.js 를 로드한다.
<head>
    <!-- swiper -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

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

 

 

[ 1-2. Local Asset ]

  • CDN vs Local Asset?
    • Local Asset을 통해 적용하는 방법도 있어 적용해보았는데,  CDN 을 통해 라이브러리를 사용하는 것이 더 바람직하고 장점이 많다고 한다.
    • 장점은 뽑자면 라이브러리 버전과 파일 내용을 완벽하게 제어할 수 있다고 하는데, 직접 버전 업 하여 사용하지 않을거라면 CDN으로 사용하도록 하자.
  • 적용 방법은 swiper js, css 파일의 경로를 지정해주는 것.

 

 

 

2. HTML 요소 적용

[ 2. HTML - Swiper 요소 생성 ]

<div class="swiper">
  <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 class="swiper-slide">Slide 4</div>
  </div>
</div>

 

 

 

3. JS Swiper 객체 속성 설정.

[ 3. JS - Swiper 객체 생성 및 속성 설정 ]

const testSwiper = new Swiper(".swiper", {
  direction: "vertical",
  autoplay: true,
  loop: true,
});

 

 

 

[ 3-1. JS - Swiper 여러 속성들 ]

 

Swiper.js에서 제공하는 매개변수들은 아래 링크에 접속해서 확인할 수 있다.

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

 

[ Swiper.js 속성들 ]

 

direcion

  • 기본값 : ' horizontal '
  • 속성값 : ' horizontal ' or ' vertical '
  • 설명 : 슬라이드의 이동방향 설정

 

slidesPerView

  • 기본값 : 1
  • 속성값 : num or ' auto '
  • 설명 : Swiper 객체 안에서 한번에 보여줄 슬라이드 개수를 설정
    • num - 한번에 num 개의 슬라이드를 보여준다.
    • auto - Swiper 넓이에 맞춰 슬라이드를 보여준다.

 

spaceBetween

  • 기본값 : 0
  • 속성값 : px, rem, %
  • 설명 : swiper-slide 간 간격을 설정.
    • px - 슬라이드 간 간격을 픽셀 단위로 설정
    • rem - 슬라이드 간 간격을 root element의 글꼴 크기에 따라 설정
    • % - 슬라이드 간 간격을 슬라이드 너비의 백분율로 설정

 

loop

  • 기본값 : false
  • 속성값 : boolean
  • 설명 : 슬라이드를 반복적으로 보여주는지 여부를 설정

 

autoplay

  • 기본값 : false
  • 속성값 : any → boolean or 객체
  • 설명 : 슬라이드가 다음 슬라이드로 자동 재생되는 자동재생 설정
    • delay 속성을 포함한 객체를 설정 값으로 지정 시 슬라이드가 자동재생 되는 시간을 조절할 수 있다.
const test2Swiper = new Swiper(".swiper", {
  ...

  autoplay: { delay: 5000 },
});

 

speed

  • 기본값 : 300
  • 속성값 : ms
  • 설명 : 슬라이드 전환 속도를 ms 단위로 설정한다.

 

pagination

  • 기본값 : true
  • 속성값 : any → boolean or 객체
  • 설명 : API에 따라서 페이징 ( Paging ) 혹은 페이지네이션 ( Pagination ) 이라고 칭하는 것은 요소의 개수를 나태내주는 UI를 말한다. true, 객체 설정 시 슬라이드 하단에 페이지네이션을 보이도록 설정.

[ pagination - 적용 방법 HTML / CSS ]

  <body>
    <div class="container-mySlide">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">테스트1</div>
          <div class="swiper-slide">테스트2</div>
          <div class="swiper-slide">테스트3</div>
          <div class="swiper-slide">테스트4</div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </body>

 

⚠️ swiper-pagination을 적용하기 위해서는 swiper와 swiper-pagination을 하나의 요소로 감싸주어야 한다.

 

[ CSS ]

.swiper-pagination-bullet {
  
  ...
  
}

.swiper-pagination-bullet-active {
  
  ...
  
}
  • pagination-bullet 클래스로 접근하여 pagination css 스타일 수정 가능.
  • pagination-bullet-active 활성화된 pagination css 스타일 수정 가능.

 

[ pagination 적용 방법 - JS 객체 생성, 속성 지정  ]

const practiceSwiper = new Swiper(".swiper", {
  
  ...
  
  pagination: {
    el: ".container-mySlide .swiper-pagination", // css 선택자 지정.
    clickable: true, // 클릭시 슬라이드 이동 설정.
    type: "타입" // 페이지네이션 타입 지정.
  }
});
  • el
    • 기본값 : undefined
    • 속성값 : 문자열
    • 설명 : 페이지네이션 요소를 지정하는 선택자
  • clickable
    • 기본값 : false
    • 속성값 : boolean
    • 설명 : 페이지네이션을 클릭하여 슬라이드를 이동할 수 있다.
  • type : " bullets " ( 기본 값 )

 

  • type : " fraction "

 

  • type : " progressbar "

 

  • type: " custom " 
    • 🚧 커스텀 페이지네이션은 추후에 학습 후 링크 추가 예정

 

 

 

 

 

navigation

  • 기본값 : true
  • 속성값 : boolean or 객체
  • 설명 : swiper의 이전 / 다음 슬라이드 이동 버튼 여부를 설정한다.
const practiceSwiper = new Swiper(".swiper", {
  
  ...
  
  navigation: {
    prevEl: ".swiper-prev",
    nextEl: ".swiper-next",
  },

});
  • prevEl : " CSS 선택자 "
    • 기본값 : undefined
    • 속성값 : 문자열
    • 설명 : 이전 슬라이드로 이동하는 버튼을 지정하는 CSS 선택자
  • nextEl : " CSS 선택자 "
    • 기본값 : undefined
    • 속성값 : 문자열
    • 설명 : 다음 슬라이드로 이동하는 버튼을 지정하는 CSS 선택자
  • hideOnClick : boolean
    • 기본값 : false
    • 속성값 : boolean
    • 설명 : 네비게이션 버튼을 클릭했을 때 버튼을 숨길 것 인지를 지정한다. hiddenClass 속성과 함께 사용해서 버튼이 hidden 될 때 스타일을 변경할 수 있다.

 

effect

  • 기본값 : " slide "
  • 속성값 : " slide ", " fade ", " cube ", " coverflow ", "flip"
  • 설명
    • slide - 기본 슬라이드 전환 효과.
    • fade - 슬라이드 전환이 인 / 아웃 효과로 전환.
    • cube - 슬라이드가 3D 큐브 효과로 전환
    • coverflow - 슬라이드를 3D 커버플로 전환
    • flip - 슬라이드를 3D 플립 효과로 전환

 

centeredSlides

  • 기본값 : false
  • 설정값 : boolean
  • 설명 : 슬라이드를 가운데 정렬할지 여부를 설정.

 

a11y 

  • ✅ 자주 사용되는 것 같지는 않지만 swiper.api 페이지의 parameters 페이지가 가나다 순 정렬이라 최상단에 위치해있어서 한번 알아봤다. swiper를 더 사용해보면서 알아두면 쓸만한 속성들이 생기면 추가로 작성해봐야겠다.
    생각이 난다면
  • 기본값 : false
  • 속성값 : any → 객체 or boolean
  • 설명 : 웹 접근성을 의미하는 Accessibility 의 첫번째 글자와 마지막 글자 사이의 11개의 글자를 나타내는 약어이다. 이속성은 Swiper 슬라이더를 포함한 요소에 접근성을 추가하여 시각 장애인 또는 저시력자가 쉽게 슬라이더를 이해하고 사용할 수 있도록 도와준다.
  • ➕ 시각 장애인 및 저시력자의 경우 스크린 리더 등의 보조 기술을 사용하여 웹 페이지를 사용할 때 a11y 속성으로 지정한 정보를 제공하여 정보를 제공받을 수 있다.
  • 웹 사이트가 웹 접근성 가이드라인인 WCAG 와 ADA ( Americans with Disabilities Act ) 등의 표준을 충족하는데 도움이 된다고 한다.
  
  const testSwiper = new Swiper( ".swiper" , {
  
    ...
    
    a11y: {
    prevSlideMessage: "이전요소로 슬라이드",
    nextSlideMessage: "다음요소로 슬라이드",
    slideLabelMessage:
      "총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.",
    paginationBulletMessage: "{{index}} 번째 슬라이드로 이동하기",
  },
  });

 

 

 

 

 

 

 

 

[ A. 오늘 복습한 내용 / B. 다음에 학습할 내용 ]

A. CSS 스타일링, HTML에서 요소를 쌓아 만드는 방법 

 

B. Swiper.js 플러그인 사용해보기

 

B. CDN, npm , esm 등 라이브러리 적용 방식 학습

 

 

[오류,에러 등등]

1. swiper effect 속성을 fade로 적용했을 때 swiper가 정상적으로 작동되지 않는 문제.

  • slidesPerView가 1 일떄만 정상적으로 적용되는 것 같다. 화면에 보이는 슬라이드 요소의 갯수를 3에서 1로 변경하니 정상적으로 작동됨.

 

2.  swiper-pagination 이 적용되지 않는 문제

 

시도 방법

  • pagination 이 겹쳐 있나 하고 위치 여러번 옮겨도 보고 z-index 값도 넣어봤지만 전혀 보이질 않음.
  • swiper 태그 내에 swiper-pagination을 위치 시켜보기 → 정상작동 X

 

원인 - 기존에 swiper-pagination 코드 작성시에는 swiper와 swiper-pagination을 감싼 container 요소가 있었는데, 복습하면서 작성한 코드는 body 태그 안에서 바로 swiper와 swiper-pagination을 작성했기 때문에 정상적으로 작동되지 않음.

 

문제 코드

  <body>

      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">테스트1</div>
          <div class="swiper-slide">테스트2</div>
          <div class="swiper-slide">테스트3</div>
          <div class="swiper-slide">테스트4</div>
        </div>
      </div>
      <div class="swiper-pagination"></div>

  </body>

 

해결 방법 - swiper와 swiper-pagination을 요소로 감싸주었더니 정상적으로 작동된다.

 

해결코드

  <body>
    <div class="container-testSlide">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">테스트1</div>
          <div class="swiper-slide">테스트2</div>
          <div class="swiper-slide">테스트3</div>
          <div class="swiper-slide">테스트4</div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </body>