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

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'으로 동일하게 되어있는 것을 연번을 수정하고, 내용도 달리하세요.
(저는 귀찮아 동일한 내용으로 했습니다만)

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