swiper-button-next , prev 버튼 바꾸기

한 시간의 삽질 끝에 알아냈다. 

 

왼쪽은 swiper의 기본 화살표와 내가 적용하려는 화살표가 겹친 모습, 오른쪽은 끝내 파란 화살표를 없앤 모습이다.

 

결론부터 보자.

.swiper-button-next {
  background: url(/godiva/img/common/next.png) no-repeat;
  background-size: 50% auto;
  background-position: center;
}

.swiper-button-prev {
  background: url(/godiva/img/common/prev.png) no-repeat;
}

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

 

관건은 ::after에 있는 display를 none으로 해주면 되는 것이었다.......

이 쉬운 걸...

 

 

허탈하지만 해결해서 기쁘다. 

 

---

TIP: 페이지 내비게이션의 색깔은 쉽게 바꿀만하다.

개발자 도구를 열어보면 

을 확인할 수 있는데, 여기서 background를 바꿔주면 된다.

css는 cascade 방식이 적용되므로 반드시 우리가 적용할 css (ex: style.css)를 나중에 적어주어야 적용된다.