React SwiperJs에서 이전/다음 버튼을 사용자 정의하는 방법

on YouTube에서 이전/다음 화살표의 모양을 사용자 정의하는 방법을 설명하라는 요청을 받았습니다React version of Swiper Js. 2가지 방법이 있습니다. 하나는 단순히 색상 값을 덮어쓰는 것입니다. 다른 하나는 이미지를 완전히 교체하는 것입니다. 두 가지를 모두 수행하는 방법을 배우려면 따라 하십시오.

1. Swiper 화살표 색상 변경

이전/다음 화살표의 색상을 변경하려면 다음과 같이 css를 덮어쓸 수 있습니다.

.swiper-button-next { color: red; }

결과:

2. Swiper 화살표 이미지 교체

이 예에서는 svg를 사용하여 원본 이미지를 바꿉니다. 그러나 원하는 경우 png, jpeg 등과 같이 원하는 다른 웹 호환 이미지 형식을 사용할 수도 있습니다.

.swiper-button-next {
  background-image: url(./next.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

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

결과:



왼쪽의 화살표를 변경하려면 class swiper-button-next 를 swiper-button-prev 로 바꾸십시오. 또한 불투명한 방식으로 화살표를 표시하는 swiper-button-disabled라는 클래스가 있으므로 이 클래스도 덮어쓰고 싶을 수 있습니다.

자세한 내용을 알고 싶으시면 작업 데모를 제공하고 전체 코드를 GitHub에 업로드했습니다. 자세한 내용을 보려면 아래 링크를 클릭하십시오. 또한 Twitter에서 저를 팔로우하거나 YouTube에서 저를 방문하세요.

연결:

Demo Website

GitHub Repository

My Blog

My YouTube Channel

일반적으로 Swiper Js 또는 웹 개발 자습서에 대해 더 많은 질문이 있습니까? 아래 댓글로 남겨주세요 :-)