[JS] 자바스크립트 라이브러리 - Swiper로 슬라이드 구현하기

 

Swiper - The Most Modern Mobile Touch Slider

 

📍

 

강의 들으면서 처음 알게 된 슬라이드 라이브러리! 

아무것도 모르던 때 슬라이드 기능을 구현하겠다고 🐶고생을 했던적이 있었는데.. 

이렇게  간단하게 슬라이드 기능을 구현할 수 있다는게 얼마나 감격스럽던지ㅠ_ㅠ

아무튼 아무것도 모르던 저처럼 고생하는분이 없길바라며 간단하게 정리해보았습니다. 

 

---

 

# Swiper

 

• 다양한 동작의 슬라이드 기능을 쉽게 사용할 수 있는 슬라이드 라이브러리이다.

 

1. 라이브러리 사용하기 

Swiper - The Most Modern Mobile Touch Slider

 

📌 HTML에 링크 태그와 스크립트 태그 붙여넣기

<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>

 

📌 필요한 레이아웃 사용 

<!-- 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>

 

- 라이브러리 버전에 따라 레이아웃이 조금 바뀌기도 하니 공식문서가서 확인해보는게 좋다.

 

📌 자바스크립트에서 옵션 적용하기 

// new Swiper(선택자, {옵션})
new Swiper('.swiper', {
  direction: 'vertical',
  autoplay: true,
  loop: true
  ...
});

 

2. 옵션

• direction(방향) : vertical / horizontal(기본값✨)
• autoplay(자동재생) : true
• loop(반복) : true
• slidesPerView(한 화면에 보여줄 슬라이드 개수) : 숫자
• spaceBetween(슬라이드 사이 여백) : 숫자
• centeredSlides(1번 슬라이드 가운데 보이기) : 숫자
• delay : 숫자

 

3. pagination, navigation 버튼 사용하기

new Swiper('.swiper', {
  pagination: {
    el:'.swiper-pagination', 
    clickable:true,
  }
});

• el(페이지 번호 요소 선택자) : 선택자이름
• clickable(사용자의 페이지 번호 요소 제어) : true

 

new Swiper('.swiper', {
  navigation: {
    prevEl: '.promotion .swiper-prev',
    nextEl: '.promotion .swiper-next',
  }
});

 

 

📌 Swiper API

Swiper - The Most Modern Mobile Touch Slider

• 이외의 더 다양한 옵션들을 사용할 수 있다.