[Slider] Swiperjs 란, 그리고 설치

# 목차

1. 사용목적
2. Swiperjs란?
3. 플러그인 홈페이지
4. 사용을 위한 설치
5. 사용을 위한 설정(css, js)
6. 사용을 위한 레이아웃 구축(html, css)
7. 사용을 위한 구문 작성(js) 그리고 결과

---

1. 사용목적

'배너', '공지사항' 등 '이미지'나 '텍스트' 등으로 된 정보를 시각적으로 회전시키거나, 수동적으로 움직이게하여 제공하기 위해 사용한다.

 

 

 

 

 

2. Swiperjs란?

'Swiperjs'는 모바일에 최적화된 'Slider'이나, 일반 웹에서도 큰 이슈없이 사용이 가능하다.

MIT라이센스의 오픈소스로 상업적 이용이 가능하다.

 

 

 

 

 

3. 플러그인 홈페이지

해당 홈페이지에서 'Swiper.js' 플러그인을 사용하는 방법, 예제 등을 확인할 수 있다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

 

 

 

4. 사용을 위한 설치

해당 플러그인을 사용하기 위해선 설치가 필요하다.

설치의 대한 방법은 총 3가지로 되어 있으며, 각자 필요에 맞는 방법으로 설치 할 수 있도록 한다.

(필자는 사용시 '3. Download assets'을 주로 사용하였다.)

   1. Install from NPM : 'NPM' 으로 인스톨

   2. Use Swiper from CDN : 프로젝트에 해당 파일을 포함하고 싶지 않은 경우, 'CDN' 으로 링크  삽입

   3. Download assets : 플러그인 파일을 다운로드하여 프로젝트 내 배치

 

 

 

 

 

5. 사용을 위한 설정(css, js)

'Swiperjs' 의 'Getting Started With Swiper' 페이지에 있는 소스로 테스트 해보도록 한다.

 

[Installation] Swiperjs를 필요에 맞는 방법으로 인스톨 한다

- Install from NPM

 $ npm install swiper

  // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/css';

  const swiper = new Swiper(...);

기본적인 스와이퍼 js, css만 불러오기에 다른 부가적인 기능(Navigation, Pagination 등)이 필요한 경우
추가적으로 불러올 수 있다.

모든 모듈과 함께 불러오고 싶은 경우 ' swiper/bundle: ' 을 불러오면 된다.

 

 

 

- Use Swiper from CDN

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

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

브라우저에서 ES modules를 사용할 경우 'swiper-bundle.esm.js' 파일을 불러온다.

 

 

 

- Download assets

https://unpkg.com/swiper@8/ 에서 필요 파일을 다운로드 받는다.

<link
  rel="stylesheet"
  href="내 프로젝트 경로/swiper-bundle.min.css(혹은 필요한 파일명)"
/>

<script src="내 프로젝트 경로/swiper-bundle.min.js(혹은 필요한 파일명)"></script>

 

 

 

 

 

6. 사용을 위한 레이아웃 구축(html, css)

[Add Swiper HTML Layout] html로 레이아웃을 설정

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

 

 

 

[Swiper CSS Styles/Size] css로 Slider 사이즈 설정

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

 

 

 

 

 

7. 사용을 위한 구문 작성(js) 그리고 결과

[Intialize Swiper] 마지막으로 'Swiperjs' 구문을 작성하여 화면을 확인한다.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  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',
  },

 

 

! 결과화면 확인 !