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

그누보드5 팁자료실

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

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

첨부파일

첨부파일 2015.11.11_01.PNG (301.9K) 19회 다운로드 2015-11-11 19:56:22

본문




theme/company/css/mobile.css

.swiper-slide {background:url(../img/main_bn.jpg) no-repeat 50% 50%;background-size: cover;height:330px;

를...

.swiper-slide {background-position: center;background-size: cover;height: 330px;

로 수정합니다.
수정하지 않고 그냥 둬도 슬라이드에 영향을 끼치지는 않네요. 뭐지~~ ( ")


theme/company/mobile/index.php

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_01.jpg)">
            <div class="bn_txt">
                <h2>Hashima Island  <br></h2>
                <p>Native name: 端島<br>Nickname: Battleship Island</p>
            </div>
        </div>
        <div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_02.jpg)">
            <div class="bn_txt">
                <h2>Hashima Island  <br></h2>
                <p>Native name: 端島<br>Nickname: Battleship Island</p>
            </div>
        </div>
        <div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_03.jpg)">
            <div class="bn_txt">
                <h2>Hashima Island  <br></h2>
                <p>Native name: 端島<br>Nickname: Battleship Island</p>
            </div>
        </div>
        <div class="swiper-slide" style="background-image:url(http://liberta1980.co-story.net/theme/company/img/Hashima_Island_04.jpg)">
            <div class="bn_txt">
                <h2>Hashima Island  <br></h2>
                <p>Native name: 端島<br>Nickname: Battleship Island</p>
            </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

이렇게 백그라운드 이미지 경로를 스타일로 입력해줍니다.
PC 메인 수정 때는 class에 연번을 줬습니다만, 여기서는 손대지 않습니다.



이미지를 자동으로 슬라이딩 시키려면...

theme/company/mobile/index.php

<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true
});
</script>



<script>
var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    speed: 1000,
    autoplay: 5000,
    loop: true, 
    autoResize: true
    })
    $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
    })
    $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
    })
</script>

로 수정합니다.

더 자세한 옵션은 아래 주소를 참고하세요.

http://www.idangero.us/swiper/api/#.VkMTxLfhCUk
추천2

댓글 전체

모바일 이미지는 네가지 변경이 되었는데 돌아가지 않고 스톱되어 있고요, 터치로 드래그하면 넘어가네요. 자동으로 돌아가게 하려면 어느부분 추가.수정을 해야하는지 부탁드립니다..
전체 1,529 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT