Aurora Modules

첨부파일 상세

게시판 상세 페이지 등 파일 첨부가 가능 상세 페이지에서 첨부한 사진 선택시 노출되는 첨부파일 상세 모듈입니다.

모듈명: attach-images-slider원본소스

첨부파일 상세 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isSlider	boolean	false	슬라이드 활성화 여부 images의 데이터가 1개 이상인 경우 true되어 활성화 됩니다.
images	Images[]	[]	첨부파일 이미지 리스트

Images 타입

속성명	타입	기본값	설명
label	string	-	상품 옵션 값
imageUrl	string	-	이미지 URL 경로
originName	string	-	이미지 명

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div slot="isOpen">
    <div class="portal">
        <div class="dim"></div>
        <div class="modal full-modal">
            <div class="title-modal">
                <div class="title-modal__header">
                    <h2 class="title-modal__title" slot="title">첨부파일</h2>
                    <button class="title-modal__close-btn" shopby-on:click="CLOSE_TITLE_MODAL">
                        <span class="ico ico--x-black-24"></span>
                    </button>
                </div>
                <div class="title-modal__content" slot="layerModalContent">
                    <div>
                        <attach-images-slider>
                            <div class="image-zoom-in">
                                <div slot="images">
                                    <div shopby-slider class="swiper">
                                        <div class="swiper-wrapper">
                                            {{#each images}}
                                            <div class="swiper-slide">
                                                <img src="{{imageUrl}}" alt="{{originName}}" />
                                                {{#if label}}
                                                <div class="image-label">{{label}}</div>
                                                {{/if}}
                                            </div>
                                            {{/each}}
                                        </div>
                                    </div>
                                    <div slot="isSlider">
                                        {{#if isSlider}}
                                        <button shopby-slider-nav-prev class="swiper-button-prev"></button>
                                        <button shopby-slider-nav-next class="swiper-button-next"></button>
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                        </attach-images-slider>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div slot="isOpen">
        <div class="portal">
            <div class="dim"></div>
            <div class="modal password-form-modal">
                <div class="title-modal">
                    <div class="title-modal__header">
                        <h2 class="title-modal__title" slot="title">첨부파일</h2>
                        <button class="title-modal__close-btn" shopby-on:click="CLOSE_TITLE_MODAL">
                            <span class="ico ico--x-black-24"></span>
                        </button>
                    </div>
                    <div class="title-modal__content" slot="layerModalContent">
                        <!-- modal content -->
                        <div>
                            <attach-images-slider>
                                <div class="image-zoom-in">
                                    <div slot="images">
                                        <div shopby-slider class="swiper">
                                            <div class="swiper-wrapper">
                                                {{#each images}}
                                                <div class="swiper-slide">
                                                    <div>
                                                        <img src="{{imageUrl}}" alt="{{originName}}" />
                                                    </div>
                                                    {{#if label}}
                                                    <div class="image-label">{{label}}</div>
                                                    {{/if}}
                                                </div>
                                                {{/each}}
                                            </div>
                                        </div>
                                        <div slot="isSlider">
                                            {{#if isSlider}}
                                            <button shopby-slider-nav-prev class="swiper-button-prev">
                                                <span class="a11y">움직이는 배너 좌측 전환 버튼</span>
                                            </button>
                                            <button shopby-slider-nav-next class="swiper-button-next">
                                                <span class="a11y">움직이는 배너 우측 전환 버튼</span>
                                            </button>
                                            {{/if}}
                                        </div>
                                    </div>
                                </div>
                            </attach-images-slider>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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