Swiper - 양 옆에 이동 버튼 만들기

Swiper - 기본 설정

Swiper - 양 옆에 이동 버튼 만들기

---

공식 문서에 의하면 기본 설정 중에서 .swiper-button-prev, .swiper-button-next를 사용하면 된다.

 

  [ HTML ]  

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
  	  // ...중략
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
</div>

 

  [ JavaScript ]  

<script>
  var galleryTopMobile = new Swiper(".gallery-top", {
    // ...중략
    navigation: {
      nextEl: ".swiper-button-next-web",
      prevEl: ".swiper-button-prev-web",
    },
  });
</script>

Swiper API

 

CSS 작업 할 때 <, >가 안없어 지는 문제가 있었다.

.swiper-button-next-web::after,
.swiper-button-prev-web::after,
.swiper-button-next-mobile::after,
.swiper-button-prev-mobile::after {
    display: none;
}

.swiper-button-prev-web,
  .swiper-button-next-web {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 500px;
  }

  .swiper-button-prev-mobile,
  .swiper-button-next-mobile {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 500px;
  }

  .swiper-button-next-web {
    position: absolute;
    top: 250px;
    left: 445px;
  }