Aurora Modules

스킨배너

메인 페이지에서 노출되는 스킨 배너 모듈입니다.

모듈명: skin-banner원본소스

스킨 배너 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-slider	-	-	(필수)슬라이드 배너(움직이는 배너)에 슬라이더를 적용하기위해 사용됨
shopby-slider-pagination	-	-	(필수)슬라이드 배너(움직이는 배너)에 페이지네이션을 적용하기위해 사용됨
shopby-slider-nav-prev	-	-	(필수)슬라이드 배너(움직이는 배너)에 이전 버튼을 적용하기위해 사용됨
shopby-slider-nav-next	-	-	(필수)슬라이드 배너(움직이는 배너)에 다음 버튼을 적용하기위해 사용됨

사용 가능 변수

변수명	타입	기본값	설명
visible	boolean	false	배너 노출 여부
isSlider	boolean	false	슬라이드 배너(움직이는 배너) 여부
bannerGroupName	string	-	배너 그룹명
images	Images[]	[]	배너조회 API응답값의 banners.bannerImages 와 동일한 데이터 (배너 이미지) (아래 타입 참조)
imageSize	ImageSize	{}	배너 이미지 사이즈 (아래 타입 참조)

Images 타입

속성명	타입	기본값	설명
openLocationType	SELF \| NEW	-	배너 이미지 랜딩 타겟
landingUrl	string	-	배너 이미지 랜딩 URL
imageUrl	string	-	배너 이미지 URL
description	string	-	배너 이미지 설명

ImageSize 타입

속성명	타입	기본값	설명
width	string	-	이미지 가로 길이
height	string	-	이미지 세로 길이

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<skin-banner>
    <div>
        <div shopby-banner-wrap class="skin-banner">
            <!-- 스켈레톤 -->
            <div slot="skeleton"></div>

            <!-- 슬라이드 배너 -->
            <div slot="sliderBanner">
                {{#if visible}} {{#if isSlider}}
                <div shopby-slider class="swiper skin-banner__contents">
                    <div class="swiper-wrapper">
                        {{#each images}}
                        <div class="swiper-slide">
                            {{#if landingUrl}}
                            <a href="{{landingUrl}}" rel="noreferrer nofollow noopener" target="{{#ifEq openLocationType 'NEW'}}_blank{{else}}_self{{/ifEq}}">
                                {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height ';')
                                false}}
                            </a>
                            {{else}} {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height
                            ';') false}} {{/if}}
                        </div>
                        {{/each}}
                    </div>

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

                    {{#if slider.usableSlideButton}}
                    <div class="skin-banner__slider-nav-warp">
                        <button shopby-slider-nav-prev class="swiper-button-prev"></button>

                        <button shopby-slider-nav-next class="swiper-button-next"></button>
                    </div>
                    {{/if}}
                </div>

                {{/if}} {{/if}}
            </div>

            <!-- 이미지 배너 -->
            <div slot="banner">
                {{#if visible}}{{#unless isSlider}} {{#with images.[0]}}
                <div class="skin-banner__contents">
                    {{#if landingUrl}}
                    <a href="{{landingUrl}}" rel="noreferrer" target="{{#ifEq openLocationType 'NEW'}}_blank{{else}}_self{{/ifEq}}">
                        {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height ';')}}
                    </a>
                    {{else}} {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height ';')}}
                    {{/if}}
                </div>
                {{/with}} {{/unless}}{{/if}}
            </div>
        </div>
    </div>
</skin-banner>

<skin-banner>
    <div>
        <article shopby-banner-wrap class="skin-banner">
            <!-- 스켈레톤 -->
            <div slot="skeleton">
                {{#unless isLoaded}}
                <div class="skeleton">
                    <div class="skeleton__media"></div>
                </div>
                {{/unless}}
            </div>
            <!--  -->

            <!-- 슬라이드 배너 -->
            <div slot="sliderBanner">
                {{#if visible}} {{#if isSlider}}
                <div shopby-slider class="swiper skin-banner--hero">
                    <div class="swiper-wrapper">
                        {{#each images}}
                        <div class="swiper-slide">
                            {{#if landingUrl}}
                            <a href="{{landingUrl}}" rel="noreferrer" target="{{#ifEq openLocationType 'NEW'}}_blank{{else}}_self{{/ifEq}}">
                                {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height ';')
                                false}}
                            </a>
                            {{else}} {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height
                            ';') false}} {{/if}}
                        </div>
                        {{/each}}
                    </div>

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

                    {{#if slider.usableSlideButton}}
                    <button shopby-slider-nav-prev class="swiper-button-prev"></button>
                    <button shopby-slider-nav-next class="swiper-button-next"></button>
                    {{/if}}
                </div>

                {{/if}} {{/if}}
            </div>

            <!-- 이미지 배너 -->
            <div slot="banner">
                {{#if visible}} {{#unless isSlider}} {{#with images.[0]}} {{#if landingUrl}}
                <a href="{{landingUrl}}" rel="noreferrer" target="{{#ifEq openLocationType 'NEW'}}_blank{{else}}_self{{/ifEq}}">
                    {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height ';')}}
                </a>
                {{else}} {{img imageUrl '' '' description 'skin-banner__img' (append 'width: ' ../imageSize.width ';' 'height: ' ../imageSize.height ';')}}
                {{/if}} {{/with}} {{/unless}} {{/if}}
            </div>
            <!--  -->
        </article>
    </div>
</skin-banner>

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