Swiper

개요: JS 실력 향상을 위해 JS를 직접 짜는 습관을 들이고 있지만 라이브러리를 쓰는 연습도 필요할 것 같아서 자주, 많이 사용되는 스와이퍼 슬라이드를 써보는 연습을 한다. 제이쿼리CDN을 넣고 싶지 않아서이기도 함...

 

 

 

1. 홈페이지

swiperjs.com/get-started#add-swiper-html-layout

Getting Started With Swiper

 

2-1. 간단한 구현만 필요할 경우 CDN을 넣는다.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 

ex)

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 

2-2변형이 조금 필요한 사람들은 다운로드 버전으로 한다.

https://unpkg.com/swiper/

UNPKG - swiper

 

 

 

3. HTML

        <div class="swiper-container">
          <!-- 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>

 

4. CSS

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

 

5. JS

const swiper = new Swiper('.swiper-container', {
  // 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',
  },
});