스토어 배너 캐러셀

store-banner-carousel는 Swiper 기반 배너 캐러셀을 감싸고, 속성으로 와이드/히어로 모드·텍스트 위치·슬라이드 수·인디케이터 스타일 등을 제어하는 웹 컴포넌트입니다. Light DOM을 사용하며 내부에 .swiper-wrapper / .swiper-slide 구조가 필요합니다.

기본 사용법

<script type="module">
  if (!window.customElements.get("store-banner-carousel")) {
    import("/ui/element/store-banner-carousel.js");
  }
</script>

<store-banner-carousel active-index="0" slides-per-view="1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">슬라이드 1</div>
      <div class="swiper-slide">슬라이드 2</div>
    </div>
  </div>
</store-banner-carousel>

Swiper 초기화는 프로젝트에서 별도 스크립트로 수행하는 경우가 많습니다. 이 컴포넌트는 active-index와 옵션 속성을 읽어 Swiper와 동기화합니다.

속성 (Attributes)

속성	타입	기본값	설명
active-index	Number	—	현재 활성 슬라이드 인덱스 (observed)
wide	Boolean	false	와이드 영역 사용 (true 시)
hero-mode	Boolean	false	히어로 모드 (최상단 배너, 헤더와 겹칠 때 여백)
text-position	String	"img-text-in"	"img-text-in" | "img-text-out" — 텍스트 위치
slides-per-view	Number	—	한 화면에 표시할 슬라이드 개수 (1, 1.3725, 2 등, 소수는 피카부형)
loop	Boolean	false	무한 반복 여부
indicator-type	Number	1	인디케이터 스타일: 1=progressbar, 2=불릿-테두리, 3=불릿-채움, 4=바
auto-height	Boolean	false	자동 높이 적용 여부

프로퍼티 / 메소드

• swiper: get — 내부 Swiper 인스턴스 (.swiper-container의 .swiper). Swiper API 참고.
• originalSlides: get — 원본 슬라이드 요소 목록 (.swiper-slide:not(.swiper-slide-duplicate)).
• updateOptionsFromAttributes(): HTML 속성을 다시 읽어 내부 옵션을 갱신합니다.

마크업 구조

내부에 다음 구조가 필요합니다:

• .swiper-container (Swiper가 초기화된 컨테이너)
• 그 안의 .swiper-wrapper > .swiper-slide 슬라이드들