Company 테마 PC 메인 슬라이딩 이미지 수정 예 > 그누보드5 팁자료실

그누보드5 팁자료실

Company 테마 PC 메인 슬라이딩 이미지 수정 예 정보

Company 테마 PC 메인 슬라이딩 이미지 수정 예

본문

theme/company/img
 
이미지 : 1444 × 647 px
 
 
theme/company/css/default.css
 
#main_bn li.bn_bg1{background:url(../img/Hashima_Island_01.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg2{background:url(../img/Hashima_Island_02.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg3{background:url(../img/Hashima_Island_03.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li.bn_bg4{background:url(../img/Hashima_Island_04.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}

'bg1' 소스를 복사해서 아래에 삽입하고, 연번과 이미지 파일명을 수정해주는 방식입니다.
 
 
theme/company/index_head.php
 
    <div id="main_bn">
        <ul class="bn_ul">
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>Hashima Island  <br></h2>
                        <p>Native name: 端島<br>Nickname: Battleship Island</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg2">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>Hashima Island  <br></h2>
                        <p>Native name: 端島<br>Nickname: Battleship Island</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg3">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>Hashima Island  <br></h2>
                        <p>Native name: 端島<br>Nickname: Battleship Island</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg4">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>Hashima Island  <br></h2>
                        <p>Native name: 端島<br>Nickname: Battleship Island</p>
                    </div>
                </div>
            </li>
        </ul>
        <div class="bn_btn">
            <a href="#" class="unslider-arrow prev">Previous slide</a>
            <a href="#" class="unslider-arrow next">Next slide</a>
        </div>
    </div>

전부 'bg1'으로 동일하게 되어있는 것을 연번을 수정하고, 내용도 달리하세요.
(저는 귀찮아 동일한 내용으로 했습니다만)

속도는 바로 아래의 스크립트 소스에서 적절히 조절하세요.
그리 부드럽게 되지는 않네요.
추천
4

댓글 9개

메인 이미지 사이즈를 고정하고 싶습니다. 방법이 없을까요. 아무리해도 안되서요 ...,
현재 이미지 사이즈가  1033 * 761 픽셀입니다. 브라우저 및 모니터 해상도에 따라
이미지가 커졌다가 작아졌다 해서 도움을 청합니다.
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT