JavaScript - Swiper (화면 전환)

01.Swiper란?

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

공식 사이트

• https://swiperjs.com/

02.적용

• Swiper.js를 적용하는 방법에는 두 가지가 있습니다.
• https://swiperjs.com/get-started

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>

• 공식 홈페이지에서 제공하는 cdn 주소 입니다.
• 복사 붙여넣기 하면 됩니다.

2-2.직접 다운 받은 Swiper 파일로 불러오기

<link rel="stylesheet" href="파일경로/swiper.css" />
<script src="파일경로/swiper/swiper.min.js"></script>  

03.코드 구현

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>

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

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

04.Swiper 구현