swiper) 화살표(next, prev), pagination(type:fraction) 커스텀

HTML

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination main_pagination"></div>
</div>

 

JS

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 2,  // 보여질 슬라이드 개수
  spaceBetween: 17,  // 슬라이드 사이의 거리
  centeredSlides: false,  // 중앙부터 시작할지 여부
  slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
  navigation: {  // 스와이프 화살표 추가
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {  // 페이지네이션 추가
    el: ".swiper-pagination",
    type: "fraction",  // 타입 숫자 ex) 1/3
  },
});

CSS

.swiper-button-next {
    background: url(../images/arrow_right.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
.swiper-button-prev {
    background: url(../images/arrow_left.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
  }
.swiper-pagination {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background-color: rgba(158, 158, 158, 0.5);
  text-align: center;
  margin: 0 0 0 450px;
  padding: 2px 10px;
  color: #fff;
}

화살표 : ::after을 감춘 뒤 각 class에 원하는 화살표 이미지를 추가하면 됨

pagination : 배경색을 주고싶었기 때문에 display:inline-block을 적용했다.\

 

결과물