[Ionic-React] Swiperjs의 scrollbar를 커스텀 하기(feat. 색상, 크기)

1. 개요

슬라이드 섹션에서 scrollbar의 색상과 크기를 프로젝트 디자인과 동일하게 커스텀을 하려고 한다.

2. 코드 상세

• 커스텀 전을 보면 스크롤바의 상태는 평범하다. 회색, 5px의 높이.

- 커스텀 전

const HomeSwiper = styled(Swiper)`
  top: -28px;
`;

const SlideSection = () => (
  <div style={{ margin: '0 -16px 0 -16px' }}>
    <HomeSwiper
      scrollbar={{
        draggable: true,
        hide: false,
      }}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      modules={[Autoplay, Scrollbar]}
      className="mySwiper"
    >
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
    </HomeSwiper>
  </div>
);

export default SlideSection;

 

• 커스텀 후를 보면 스코롤바가 노란색으로 변했고 드래그 부분과 레일 부분의 height가 달라졌다.

- 커스텀 후

const HomeSwiper = styled(Swiper)`
  top: -28px;

  .swiper-scrollbar-drag {
    background: #ffe000;
    height: 4px;
    top: -50%;
  }
  .swiper-scrollbar-horizontal {
    height: 2px;
    background: #f1f1f1;
  }
`;

const SlideSection = () => (
  <div style={{ margin: '0 -16px 0 -16px' }}>
    <HomeSwiper
      scrollbar={{
        draggable: true,
        hide: false,
      }}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      modules={[Autoplay, Scrollbar]}
      className="mySwiper"
    >
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
    </HomeSwiper>
  </div>
);

export default SlideSection;

3. 사용법

//SlideSection.tsx
//임포트 부분
import { Autoplay, Scrollbar } from 'swiper';

//CSS 부분
const HomeSwiper = styled(Swiper)`
  top: -28px;

/* 여기부터 스크롤바 커스텀 부분 */
  .swiper-scrollbar-drag {
    background: #ffe000;
    height: 4px;
    top: -50%;
  }
  .swiper-scrollbar-horizontal {
    height: 2px;
    background: #f1f1f1;
  }
/* 여기까지 스크롤바 커스텀 부분 */
`;

//본문 부분
const SlideSection = () => (
  <div style={{ margin: '0 -16px 0 -16px' }}>
    <HomeSwiper
      ...
      modules={[Autoplay, Scrollbar]}
      ...
    >
      ...
      <SwiperSlide>
        <IonImg src="/assets/slide/Slide_1.png" />
      </SwiperSlide>
    </HomeSwiper>
  </div>
);

export default SlideSection;

우선 사용할 모듈을 임포트하고 모듈 속성에 사용할 모듈을 지정한다. 지금은 scrollbar를 사용할 것이라 지정했다.

커스텀을 하기 위해서 공식문서를 참고했다. 공식문서 스크롤바 카테고리 링크

스크롤바의 드래그 부분과 레일 부분을 커스텀 하기 위한 두가지 class를 확인 할 수 있다.

styled-components 변수명을 만들고 내용에 해당 클래스를 지정하고 원하는 스타일 속성을 사용한다.

const HomeSwiper = styled(Swiper)`
  top: -28px;

  .swiper-scrollbar-drag {
    background: #ffe000;
    height: 4px;
    top: -50%;
  }
  .swiper-scrollbar-horizontal {
    height: 2px;
    background: #f1f1f1;
  }
`;

드래그 부분의 색상과 높이, 레일 부분의 색상과 높이만 커스텀하였다.