[JS] swiper.js / swiper슬라이드

 

swiper 슬라이드 사용법 입니다.

 

시간이 없으면 3-3 javascript 부분만 보시면 됩니다.

 

---

1.swiper.js

swiper.js는 쉽게 슬라이드를 만들수 있게 해놓은 스크립트 이다.

 

공식 홈페이지에서 자료를 볼수 있다.

 

 

swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

2.적용

2-1 cdn방식

 

swiper.js를 적용하는 방법은 크게 2가지가 있다. 

1.cdn 방식 외부에서 받아와서 사이트에 적용시키는 방법이다. 

외부에서 파일을 없애 버리면 적용이 풀린다.

 

아래는 공식 홈페이지에서 제공하는 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>

 

2.직접 파일을 다운로드 받아서 파일을 적용시키는 방법이다

 

내가 가진 파일은 swiper-4.5.1버전이다.

swiper-4.5.1.zip

1.43MB

 

 

3.코드

 

3-1 html

[html]
//↓↓ 뷰포트로 반응형으로 구현하려면 반듯이 작성해야 되는 코드입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
//↓↓ swiper.js의 css입니다. cdn방식으로 웹에서 불러왔습니다.
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
//↓↓ swiper.js의 cdn버전 입니다. 
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- swiper슬라이더 메인컨테이너 -->
<div class="swiper-container">
  <!-- 보여지는 영역 -->
  <div class="swiper-wrapper">
    <!-- <div class="swiper-slide">내용</div> 를 추가하면된다 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
  </div>
  <!-- 페이징 버튼 처리 상황에 따라 추가 삭제가능-->
  <div class="swiper-pagination"></div>

  <!-- 방향 버튼 상황에 따라 추가 삭제가능 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

 

3-2 css코드

 

[css]
	//초기설정
	html, body {
      position: relative;
      height: 100vh;
    }
    //초기 설정
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    //.swiper-container 설정 
    .swiper-container {
      width: 100%;
      height: 100vh;
    }
    //.swiper-slide 설정 
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    
	//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음
	.swiper-container-vertical>.swiper-pagination-bullets{
    	top: unset !important;
    	bottom: 10px;
    	left: 0;
    	width: 100%;
	}
	//swiper.css에서 수정을 해야 되지만 cdn으로 불러와서 여기서 중복 설정 + !important로 제어 하였음
	.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  		display : inline-block !important;
  		margin: 6px 2px !important;
	}

 

3-3 js코드

 

[javascript]

const swiper = new Swiper('.swiper-container', {
  //기본 셋팅
  //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
  direction: 'horizontal',
  //한번에 보여지는 페이지 숫자
  slidesPerView: 3,
  //페이지와 페이지 사이의 간격
  spaceBetween: 30,
  //드레그 기능 true 사용가능 false 사용불가
  debugger: true,
  //마우스 휠기능 true 사용가능 false 사용불가
  mousewheel: true,
  //반복 기능 true 사용가능 false 사용불가
  loop: true,
  //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
  centeredSlides: true,
  // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
  // effect: 'fade',
  
  
  //자동 스크를링
  autoplay: {
    //시간 1000 이 1초
    delay: 2500,
    disableOnInteraction: false,
   },
  
  //페이징
  pagination: {
    //페이지 기능
    el: '.swiper-pagination',
    //클릭 가능여부
    clickable: true,
  },

  //방향표
  navigation: {
    //다음페이지 설정
    nextEl: '.swiper-button-next',
    //이전페이지 설정
    prevEl: '.swiper-button-prev',
  },
  
});

 

 

 

4.실행 파일

 

 

See the Pen swiper 스크립트 by 윤재현 (@jh91) on CodePen.

 

 

 

 

 

5.데모

 

제가 올려놓은 swiper-4.5.1파일에 보면 demos폴더가 있습니다. 

그곳에서 여러 데모를 확인할수 있습니다.

 

 

올려 놓은 파일을 풀면 위에 처럼 나옵니다.

 

제가 올린 파일이 불안하면

 

공식사이트에서 운영하는 깃허브에서 받으면 됩니다.

 

github.com/nolimits4web/swiper

nolimits4web/swiper