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

은돌1113 2022. 3. 2. 20:23

728x90

Swiper - 기본 설정

20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라이브러리 모바일

eundol1113.tistory.com

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

Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라

eundol1113.tistory.com

공식 문서에 의하면 기본 설정 중에서 .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

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

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

728x90