[Javascript] 자바스크립트 Swiper 라이브러리 추천, Javascript Slider Library

 

---

슬라이더 기능은 웹 사이트를 만들 때 자주 사용합니다.

Swiper는 부트스트렘 템플릿에서도 자주 사용하는 라이브러리로 사용법을 어느 정도 알아두면 좋습니다.

 

사이트에 가서 Swiper js를 직접 다운로드해 사용하셔도 되지만,

만약 물리 파일을 직접 추가하고 싶지 않다면 아래 CDN을 사용합니다.

<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의 html 형태는 아래와 같습니다. 기본적으로 class 이름은 swiper를 사용합니다.

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

 

css를 사이즈를 조정하고 싶으면 아래 접근자를 활용하면 됩니다.

.swiper {
  width: 600px;
  height: 300px;
}

 

swiper html를 따로 컴포넌트화 한 후 ajax로 불러오고 싶을 때가 있을 거에요. 그럴 땐 ajax success 후 초기화해줘야 합니다.

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',
  },
});

 

---

 

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider