모바일 쇼핑몰 메인 배너에 이미지를 2개 이상 등록할 경우, 자동으로 표시되는 스와이프 아이콘을 수정할 수 있어요.
자세히 알아보기
스마트디자인 편집창의 '편집' 기능으로 변경하기
스마트디자인 편집창에서 메인상품 모듈 '편집' 버튼을 클릭한 후 원하는 배너 형태를 선택하여 적용해 보세요.
디자인 소스로 편집하기
※ 스마트디자인 편집창에 css 화면이 없을 경우 스마트디자인 편집창 좌측 하단에서 [화면추가]를 선택해 주세요.
- 1번 형태 배너 (작은 동그라미)
- 화면 위치 : 메인화면(index.html)
아래와 같이 파란색 소스를 추가해 주세요.
## 상단 생략 ##
<!--@layout(/layout/basic/main.html)-->
<div class="mainBanner typeSmall" module="Mobile_Banner">
<!--@css(/css/module/layout/mobileBanner.css)-->
<!--
$swipe = yes
$custom = no
-->
<ul>
<li><a href="{$banner_link_url}"><img src="{$banner_image_url}" width="100%" alt=""></a></li>
<li class="afterNone"><a href="{$banner_link_url}"><img src="{$banner_image_url}" width="100%" alt=""></a></li>
</ul>
</div>## 하단 생략 ##
- 화면 위치 : css > 모듈(module) > 레이아웃(layout) > mobileBanner.cssbr> 아래와 같이 파란색 소스를 추가해 주세요.
#main .mainBanner.typeSmall .paginate { position:absolute; bottom:7px; z-index:10; width:100%; height:9px; text-align:center; font-size:0; line-height:0; background-color:transparent; }
#main .mainBanner.typeSmall .paginate.typeSwipe button.circle { margin:0 3px 0 4px; width:9px; height:9px; border:0; cursor:pointer; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_swipe.png") no-repeat 0 0; background-size:9px 9px; }
#main .mainBanner.typeSmall .paginate.typeSwipe button.circle.selected { background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_swipe_on.png") no-repeat 0 0; background-size:9px 9px; }
- 화면 위치 : 메인화면(index.html)
- 2번 형태 배너 (1/3 숫자 표시)
- 화면 위치 : 메인화면(index.html)
아래와 같이 파란색 소스를 추가해 주세요.
## 상단 생략 ##
<!--@layout(/layout/basic/main.html)-->
<div class="mainBanner" module="Mobile_Banner">
<!--@css(/css/module/layout/mobileBanner.css)-->
<!--
$swipe = yes
$custom = no
$paging_type = numbering
-->
<ul>
<li><a href="{$banner_link_url}"><img src="{$banner_image_url}" width="100%" alt=""></a></li>
<li class="afterNone"><a href="{$banner_link_url}"><img src="{$banner_image_url}" width="100%" alt=""></a></li>
</ul>
</div>## 하단 생략 ##
- 화면 위치 : css > 모듈(module) > 레이아웃(layout) > mobileBanner.css
아래와 같이 파란색 소스를 추가해 주세요.
#main .mainBanner .afterNone { display:none; }
#main .mainBanner .paginate.typeNumber { position:absolute; bottom:7px; z-index:10; background-color:transparent; }
#main .mainBanner .paginate.typeNumber p {width:60px; height:17px; margin:0 auto; padding:3px 0; font-weight:bold; font-size:11px; line-height:11px; color:#fff; font-weight:bold; font-family:Verdana; background:rgba(65,65,70,0.7); text-shadow:1px 1px 0px rgba(75,68,67,0.65); -webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; border-radius:8px; }
#main .mainBanner .paginate.typeNumber strong { color:#508bed; }
- 화면 위치 : 메인화면(index.html)
- 3번 형태 배너 (1, 2, 3 선택 숫자 표시)
- 화면 위치 : 메인화면(index.html)
아래와 같이 파란색 소스를 추가해 주세요.
## 상단 생략 ##
!--@layout(/layout/basic/main.html)--
<div class="mainBanner" module="Mobile_Banner">
<!--@css(/css/module/layout/mobileBanner.css)-->
<!--
$swipe = yes
$custom = no
$paging_type = rolling
-->
<ul>
<li><a href="{$banner_link_url}"><img src="{$banner_image_url}" width="100%" alt=""></a></li>
<li class="afterNone"><a href="{$banner_link_url}"><img src="{$banner_image_url}" width="100%" alt=""></a></li>
</ul>
</div>## 하단 생략 ##
- 화면 위치 : css > 모듈(module) > 레이아웃(layout) > mobileBanner.css
아래와 같이 파란색 소스를 추가해 주세요.
#main .mainBanner .afterNone { display:none; }
#main .mainBanner .typeRoll { width:100%; height:22px; }
#main .mainBanner .typeRoll ol { font-size:0; line-height:0; }
#main .mainBanner .typeRoll ol li { display:inline-block; width:20%;height:22px; text-align:center; border-bottom:2px solid #bbb; border-left:1px solid #ececec; background:#fff;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#main .mainBanner .typeRoll ol li:first-child { border-left:0; }
#main .mainBanner .typeRoll ol li a { display:block; color:#757575; font-size:11px; line-height:22px; }
#main .mainBanner .typeRoll ol li.selected { border-bottom:2px solid #508bed; }
#main .mainBanner .typeRoll ol li.selected a { color:#508bed; font-weight:bold; }
#main .mainBanner .typeRoll ol.grid1 li { width:100%; }
#main .mainBanner .typeRoll ol.grid2 li { width:50%; }
#main .mainBanner .typeRoll ol.grid3 li { width:33.33%; }
#main .mainBanner .typeRoll ol.grid4 li { width:25%; }
- 화면 위치 : 메인화면(index.html)
모바일 메인 배너에 스와이프 아이콘 적용된 모습