Swiper Bullets를 바(Bar) 형태로 변경하기

개요

Swiper 슬라이더의 기본 동그라미 형태 pagination bullets를 세련된 바(bar) 형태로 변경하는 방법을 알아봅니다. 이 방법은 상품 이미지 갤러리나 다른 슬라이더 섹션에 적용할 수 있습니다.

기본 설정 확인

1. Swiper 설정 (JavaScript)

먼저 media-gallery.js 또는 해당 슬라이더 JavaScript 파일에서 pagination 타입을 확인합니다:

pagination: {
  el: this.querySelector('.swiper-pagination'),
  clickable: true,
  type: 'bullets',  // 'bullets' 타입 사용
},

2. HTML 구조

pagination 요소가 있는지 확인:

<div class="swiper-pagination"></div>

CSS 스타일링

기본 스타일 제거 및 바 형태 적용

section-main-product.css 또는 해당 섹션 CSS 파일에 다음 스타일을 추가합니다:

/* Pagination 컨테이너 설정 */
.product__media-gallery .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Bullets를 바 형태로 변경 */
.product__media-gallery .swiper-pagination-bullet {
  width: 3rem;
  height: 5px;
  background: rgba(var(--color-foreground), 0.2);
  border-radius: 0;
  opacity: 0.8;
  margin: 0 !important;
  flex-shrink: 0;
}

/* 활성화된 Bullet 스타일 */
.product__media-gallery .swiper-pagination-bullet-active {
  width: 3rem;
  height: 5px;
  background: rgb(var(--color-foreground));
  opacity: 0.8;
}

/* 기본 테마의 :after 스타일 완전히 제거 */
.product__media-gallery .swiper-pagination-bullet:after,
.product__media-gallery .swiper-pagination-bullet-active:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

주요 포인트 설명

1. 컨테이너 레이아웃

.product__media-gallery .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

• display: flex: 가로 배치를 위한 flexbox 사용
• justify-content: center: 중앙 정렬
• width: 100%: 전체 너비 사용

2. 바 형태 만들기

.product__media-gallery .swiper-pagination-bullet {
  width: 3rem;        /* 바의 너비 */
  height: 5px;       /* 바의 높이 (얇은 바) */
  border-radius: 0;   /* 둥근 모서리 제거 (직각 바) */
  background: rgba(var(--color-foreground), 0.2);  /* 반투명 배경 */
  opacity: 0.8;
  margin: 0 !important;
  flex-shrink: 0;     /* 크기 고정 */
}

핵심 변경사항:

• width: 동그라미 대신 가로로 긴 바 형태
• height: 얇은 바 (5px)
• border-radius: 0: 직각 모서리
• margin: 0: 간격 제거 (필요시 gap 사용)

3. 활성화된 바 스타일

.product__media-gallery .swiper-pagination-bullet-active {
  background: rgb(var(--color-foreground));  /* 진한 색상 */
  opacity: 0.8;
}

활성화된 바는 더 진한 색상으로 표시되어 현재 슬라이드 위치를 명확히 보여줍니다.

4. 기본 테마 스타일 오버라이드

중요: Shopify 테마의 기본 스타일에서 :after pseudo-element가 동그라미 형태를 만들기 위해 사용됩니다. 이를 완전히 제거해야 합니다:

.product__media-gallery .swiper-pagination-bullet:after,
.product__media-gallery .swiper-pagination-bullet-active:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

!important를 사용하여 기본 테마 스타일보다 우선순위를 높입니다.

커스터마이징 옵션

바 크기 조정

/* 더 긴 바 */
.product__media-gallery .swiper-pagination-bullet {
  width: 4rem;
  height: 6px;
}

/* 더 짧은 바 */
.product__media-gallery .swiper-pagination-bullet {
  width: 2rem;
  height: 4px;
}

활성화된 바를 더 길게

.product__media-gallery .swiper-pagination-bullet-active {
  width: 6rem;  /* 기본의 2배 */
}

바 사이 간격 추가

.product__media-gallery .swiper-pagination {
  gap: 0.8rem;  /* 바 사이 간격 */
}

둥근 모서리 적용

.product__media-gallery .swiper-pagination-bullet {
  border-radius: 2px;  /* 약간 둥근 모서리 */
}

색상 커스터마이징

/* 비활성 바 */
.product__media-gallery .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.2);  /* 검은색 반투명 */
}

/* 활성 바 */
.product__media-gallery .swiper-pagination-bullet-active {
  background: #000000;  /* 검은색 */
}

반응형 디자인

모바일과 데스크톱에서 다른 크기 적용:

/* 기본 (모바일) */
.product__media-gallery .swiper-pagination-bullet {
  width: 2.4rem;
  height: 4px;
}

/* 데스크톱 */
@media (min-width: 768px) {
  .product__media-gallery .swiper-pagination-bullet {
    width: 3rem;
    height: 5px;
  }
}

트러블슈팅

문제 1: 여전히 동그라미가 보임

원인: 기본 테마의 :after 스타일이 적용되고 있음

해결:

.product__media-gallery .swiper-pagination-bullet:after {
  display: none !important;
  content: none !important;
}

문제 2: 바가 겹쳐 보임

원인: margin이나 gap이 설정되지 않음

해결:

.product__media-gallery .swiper-pagination {
  gap: 0.8rem;  /* 간격 추가 */
}

문제 3: 스타일이 적용되지 않음

원인: CSS 특이도(specificity)가 낮음

해결: 더 구체적인 선택자 사용 또는 !important 사용

완성된 예제

/* 상품 이미지 갤러리 Pagination 바 형태 */
.product__media-gallery .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product__media-gallery .swiper-pagination-bullet {
  width: 3rem;
  height: 5px;
  background: rgba(var(--color-foreground), 0.2);
  border-radius: 0;
  opacity: 0.8;
  margin: 0 !important;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.product__media-gallery .swiper-pagination-bullet-active {
  width: 3rem;
  height: 5px;
  background: rgb(var(--color-foreground));
  opacity: 1;
}

.product__media-gallery .swiper-pagination-bullet:after,
.product__media-gallery .swiper-pagination-bullet-active:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

결론

Swiper bullets를 바 형태로 변경하는 것은 간단하지만, 기본 테마 스타일을 완전히 오버라이드하는 것이 중요합니다. 특히 :after pseudo-element를 제거하는 것을 잊지 마세요. 이 방법을 사용하면 더 현대적이고 미니멀한 슬라이더 컨트롤을 만들 수 있습니다.