Swiper Custom

Swiper 는 내부 CSS 가 있기 때문에
global.css 파일을 루트에 생생해서 기존 Navigation 및 Pagination 을 커스텀 했다.

방법은 간단하게 설명 가능하다.

1. Class Name 파악

개발자 도구를 활용해 현재 먹고 있는 Class Name 을 확인한다.

2. Class Name 에 속성 추가

확인한 class name 에 내가 넣고싶은 속성을 추가한다.

.swiper-button-next {
  background: url("이미지링크")
    no-repeat;
  background-size: 50% auto;
  background-position: center;
  right: 30%;
}

3. Id 부여

사실 2번까지만 해도 스타일은 전역으로 적용 된다.
하지만 페이지 마다 다른 스타일이 적용되어야 할 경우가 있으므로 나는 Id 값을 부여했다.

코드는 위와 같지만 id 가 추가되었다는 점이 상이하다.

#introSwiper .swiper-button-next {
  background: url("이미지링크")
    no-repeat;
  background-size: 50% auto;
  background-position: center;
  right: 30%;
}

그리고 해당 컴포넌트에서 id 값을 추가해줘야 겠지.

  <Swiper id="introSwiper" />