[JS] swiper.js / 페이지 이동

들어가기 전에 swiper.js란

 

swiper.js에 관한 글은 이전에 작성한 글을 참고하면 도움이 될 것입니다.

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

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

 

[JS] swiper.js / 페이지 이동 

오늘 포스팅을 다뤄 볼 것은 slideTo 함수를 이용한 페이지 이동입니다.

 

아래의 코드를 참고하시기 바랍니다.

 

제이쿼리와 함께 사용하면 조금 더 편리하게 사용 가능합니다.

 

HTML 코드

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<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 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>

<ul>
  <li>slide1</li>
  <li>slide2</li>
  <li>slide3</li>
  <li>slide4</li>
  <li>slide5</li>
  <li>slide6</li>
</ul>

ul의 li를 클릭하면 li의 index 값으로 slide이동을 할 계획입니다.

 

[함께 사용한 제이쿼리 코드들]

 

아래는 글들은 이번에 제이쿼리 코드들에 대한 포스팅 입니다.

 

↓↓↓↓↓↓↓↓↓↓

 

[jQuery] 제이쿼리 click

[jQuery] 제이쿼리 click

 

[jQuery] 제이쿼리 index

[jQuery] 제이쿼리 index

 

 

 

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 {
      width: 100%;
      height: 100vh;
    }
    .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-container-vertical>.swiper-pagination-bullets{
    top: unset !important;
    bottom: 10px;
    left: 0;
    width: 100%;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  display : inline-block !important;
  margin: 6px 2px !important;
}

ul{
  position: fixed;
  width: 100%;
  top:0;
  z-index:2;
}

ul li{
  color:black;
  width: 10%;
  cursor:pointer;
}

css에서는 ul에 position값을 fixed로 주어 상단에 노출되게 했습니다.

li에는 cursor pointer를 설정해서 마우스 커서를 손가락 모양으로 바꿨습니다.

 

JS 코드

//swiper선언
const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  slidesPerView: 3,
  spaceBetween: 30,
  debugger: true,
  mousewheel: true,
  loop: true,
  centeredSlides: true,

  autoplay: {
    //시간 1000 이 1초
    delay: 2500,
    disableOnInteraction: false,
   },

  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
});

$('ul li').click(function(){
  var index = $(this).index();
  swiper.slideTo(index + 1);
})

JS에서는 제이쿼리 click()과 제이쿼리 index()를 사용하였고

swiper의 내장 함수인 slideTo를 이용하여 페이지 이동을 하였습니다.

 

index는 0부터 시작하기에 +1을 해주었습니다.

 

코드 팬

See the Pen swiper 페이지 이동 by 윤재현 (@jh91) on CodePen.