메가바이트스쿨 프론트엔드 4기 3주차 - Swiper JS

임성열·2023년 1월 2일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

3주차 배운 내용

3주차 동안은 HTML, CSS 마무리와 Javascript 변수 등을 학습하였지만, 아직 정리가 안되서 Swiper.js를 먼저 정리해봅니다.

Swiper JS

1. Swiper JS 란?

Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions (utilizing GPU to offload graphic-intensive transitions and create smoother visuals) and excellent native behavior. Swiper is available for vanilla JavaScript, Angular, React, Vue.js, and Svelte.
-출처: https://blog.logrocket.com/building-modern-sliders-html-css-swiper/

Swiper는 자바스크립트 라이브러리 중 하나이며 주로 슬라이드에 관련된 스타일이나 동작을 만드는데 사용한다.

Swiper 자바스크립트의 코드 내에서 자동적으로 부여하는 클래스 이름등을 통해 기능별로 따로 CSS스타일 입히기도 편하며 Lazyloading과 같은 필수적인 기능 또한 쉽게 사용할 수 있도록 제공한다.

여담으로 Nocode Swiper Studio를 살펴보면 API를 굳이 정독하지 않아도 대충 무슨 이름의 기능이 어떤 결과물을 내는지 가늠하기도 쉽다. ~~나는 이게 있는지도 모르고 VScode에 일일이 쳐서 확인해보고 예제를 하나씩 찾아본게 레전드다.~~

2. 설치

3. 기본 환경 설정

1. HTML 환경

아래는 Swiper 홈페이지 튜토리얼에서 복사해온 코드이다.

Swiper는 라이브러리라서 HTML 작성 시 정해진 단계 요소를 잘 따라줘야 인식한다.

클래스 이름들 또한 기본 틀은 유지해주는게 좋다. 자바스크립트가 자동적으로 생성하는 클래스 이름이 swiper-slide-active(현재 사용중인 슬라이드를 지칭)같은 식으로 지정되서 사용할 일이 많으니 일일이 바꾸는 것 보다는 정해진 틀 안에서 쓰는게 여러모로 편하다.

<!-- Slider main container -->
<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 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

2. Javascript 환경

아래는 Swiper에서 제공하는 기본 환경일 뿐이고 자세한 설정은 API 문서를 통한다.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

직접 사용할때에는 슬라이더가 한 두개도 아니고 캐러샐만 만들지도 않기 때문에 여러개의 Swiper 객체를 생성할 경우 HTML에서 class가 아닌 id로 구분하는게 편하다.

4. 사용법

기본적인 사용

쓰고자 하는 부분에 HTML을 3-1에 맞추어 작성한다.
필요하면 id도 같이 부여해준다.
CSS에서 .swiper의 width와 height 정도만 일단 정해주면 기본적으로 제공하는 스타일로 진행할 수 있다.
JS에서 스타일을 바꾸는게 가능하기 때문에 CSS 스타일을 먼저 다 끝냈다가는 아래 다 끝나고 처음부터 다시 스타일 해야될 때도 있다. ~~나는 처음에 자주 그랬다.~~
API문서를 통해 구현하고자 하는 부분을 Swiper 객체 내의 두번째 인수에 잘 담아준다.
안되면 HTML에 구조상의 오류가 없는지, 클래스 이름이 동일한지, JS 객체의 인수안에 오타나 잘못된 value값이 들어가 있는지, 지정하고자 하는 key값의 클래스 이름이 제대로 들어가 있는지 등등 꼼꼼히 봐야한다.
CSS 스타일을 마저 수정해준다. (Navigation, Pegination, etc...)

예제 - scrollbar CSS, JS

홈페이지에 제공되는 코드를 복사/붙여넣기만 해도 slide, navigation button, pagination, scrollbar 등은 금방 완성한다.

하지만 기본적으로 제공되는 모듈을 만지려면 개발자 도구나 API문서를 통해서 클래스이름을 일일이 찾아내 어떤식으로 스타일이 적용되고 있는지 확인해야하는 번거로움이 있다.
Swiper 객체 내의 변수나 함수에 접근할 수 있는 method를 통해서 직접 커스터마이징 해도 된다.

예를 들어, scrollbar의 경우에는 Swiper js에서 .swiper-scrollbar를 스크롤 바깥부분으로, .swiper-scrollbar-drag를 스크롤바를 드래그 영역으로 구분하여 클래스 이름을 부여한다. 색상을 변경할 때는 위와 같이 background 속성을 사용해서 바꿀 수 있다.

navigation button(previous and next)의 경우에는

.swiper-button-next::after {
	display: none;
}

와 같이 기본적으로 제공되는 스타일을 가려도 되고, 아니면 API문서 - Methods & Properties 에서 확인하여 직접 버튼 요소를 작성해서 JS로 연결하면 된다.

마치며

1, 2 주차 동안에 새로운 개념을 받아들이는데에 에너지를 쓴 보람이 느껴지기 시작한다. CSS도 대강이나마 어떤 느낌인지 감이 오고, 왜 HTML, CSS, JS 나눠서 쓰는건지 납득이 조금씩 된다.

혼자서 홈페이지 만들어 보는 것도, 전에는 할 줄 모르고 물어볼 사람도 없고 해서 막막하게 검색만 주구장창하다 내려놓는게 다반사였는데, 본격적으로 배우면서 숙련도가 오를수록 만드는 것도 할만해진다.

Swiper는 처음 인강에서 클론 코딩 예제 연습할 때는 무엇에 쓰는 물건인지 몰라서 그냥 넘어갔는데, 의외로 재밋는 물건이다. 처음에는 HTML, CSS 복습 겸, Javascript 예습 겸 Swiper 예제 홈페이지나 만들어 봐야지 하고 시작하였는데, 쓰면 쓸 수록 재미난 기능들도 많고, API 문서 읽으면서 사용하는 법을 연습하는데도 도움이 되기도 했다.

Swiper 연습용 홈페이지 링크
계속 연습하면서 추가해나갈 예정이다.