Aurora Modules

카테고리 슬라이더

상품진열 페이지에서 노출되는 카테고리 슬라이더 모듈입니다.

모듈명: category-slider원본소스

카테고리 슬라이더 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-slider-id	string	-	슬라이더 ID. 슬라이더를 초기화 할때 사용한다.

사용 가능 변수

변수명	타입	기본값	설명
multiLevelCategories	Category[]	[]	몰정보 조회 API 응답 중 `categories.multiLevelCategories`와 동일 (카테고리 정보) (아래 타입 참조)
slider	SliderIdState	-	슬라이더 고유 id (아래 타입 참조)

Category 타입

속성명	타입	기본값	설명
categoryNo	number	-	카테고리 번호
depth	number	-	카테고리 depth
label	string	-	카테고리명
count	number	0	카테고리 상품 수
children	array	[]	하위 카테고리 목록 CategoryChildren 타입과 동일한 데이터

SliderIdState 타입

속성명	타입	기본값	설명
id	string	-	슬라이더의 고유 id

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div>모바일 전용 모듈입니다</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<category-slider>
    <div>
        <nav class="category-slider" slot="categorySlider">
            <div class="swiper category-slider__wrapper" shopby-slider-id="{{slider.id}}">
                <ul class="swiper-wrapper">
                    {{#each multiLevelCategories}}
                    <li class="swiper-slide category-slider__slide">
                        <a class="category-slider__item">{{label}}</a>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </nav>
    </div>
</category-slider>

/* 여기에 스타일 코드를 작성해주세요. */