[jQuery] Swiper 슬라이더 버튼 컬러 변경 (Navigation, Pagination)

 

Swiper 스와이퍼 슬라이더 기본 코드

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

  <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

 

 

위와 같이 기본 CSS를 불러와 사용하면 아래처럼 모든 버튼들 컬러가 파란색으로 보여진다.

 

 

 

 

 

Navigation, Pagination 컬러 변경

 

네비게이션, 페이지네이션의 파란색을 다른 색으로 변경하는 방법은 아주 간단하다. 

아래와 같이 테마 컬러를 변경해주는 코드를 추가해주면 된다. 단, 기존 Swiper CSS 코드보다 아래쪽에 위치해야한다.

<style>
    :root {
    --swiper-theme-color: #000
    }
</style>

 

 

그러면 이렇게 화살표 네비게이션과 페이지네이션이 모두 검정 컬러로 변경된다. 간단하게 변경 끝!

 

 

 

 

 

- Swiper  관련 다른 글들 -

[jQuery] Swiper Options 자주 사용하는 옵션

Swiper 슬라이더 익스플로러에서 작동 안될 때 해결 방법

[오류] Swiper 오류 해결 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type '