Swiper Parallax 슬라이더 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

Swiper Parallax 슬라이더 정보

최신글 Swiper Parallax 슬라이더

첨부파일

swiper_parallax.g5.zip (113.3K) 196회 다운로드 2016-04-09 17:27:45

본문

수평, 수직 방향의 swiper parallax 스크롤 슬라이더입니다.
버튼, 키보드, 마우스휠 등으로 컨트롤 할 수 있습니다.

유의사항
배경이미지는 현재 문서 위치에서 상대경로로 지정해 주세요.
게시물 내용이 길면 잘릴 수 있으므로 이미지와 내용을 적당한 길이로 구성해 주세요.

사용법
<?php
// 첫 번째 옵션에 배경 이미지 상대경로를 지정합니다.
echo latest("swiper_parallax", "gallery", 10, 0, 1, "./images/bg.jpg");

// 두 번째 옵션에 보여지는 영역의 width를 지정할 수 있습니다.(기본 500)
// echo latest("swiper_parallax", "gallery", 10, 0, 1, "./images/bg.jpg|500");

// 세 번째 옵션에 'v'를 추가하면 vertical 형식의 parallax가 됩니다.
// vertical이 지정되면 마우스휠, 키보드로 컨트롤할 수 있습니다.
// echo latest("swiper_parallax", "gallery", 10, 0, 1, "./images/bg.jpg|600|v");
?>


• Swiper: http://idangero.us/swiper/
추천
4

댓글 전체

아이고 혼자 보다가 해결했네요..ㅎㅎ

다운받은 파일중에 skin/latest/swiper_basic/latest.skin.php 58번째줄 밑으로

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
</div>
<script src="<?php echo G5_URL ?>/plugin/swiper/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>

이렇게 적용하면 되네요. ㅎㅎ 감사합니다!
아래코드처럼 적용하면 되는지요..ㅜ.ㅜ

// 원본이미지 출력
if ( $list[$i]['file']['count'] ) {
echo " <div class=\"text\" data-swiper-parallax=\"-1000\">\n";
$list_files = get_file($bo_table, $list[$i]['wr_id']);

for( $k=0; $k<count($list_files); $k++ ) {
$current_file = $list_files[$k]['path']."/".$list_files[$k]['file'];
if (preg_match("/\.(gif|jpg|png)$/i", $current_file)) {
echo "<img src=\"$current_file\" alt=\"\" border=\"0\" style=\"width:100%; height:auto;\"><br> \n";
}

----------58번줄----------


        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
</div>
<script src="<?php echo G5_URL ?>/plugin/swiper/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>
--------------여기까지첨가---------


}
echo " </div>\n";
}
echo " <div class=\"text\" data-swiper-parallax=\"-2000\">\n";
echo nl2br(stripslashes($list[$i]['wr_content']))."\n";
echo " </div>\n";
echo " </div>\n";
}
?>
</div>
<div class="swiper-pagination"></div>
<?php if (!$is_vertical) { ?>
전체 2,170 |RSS
그누보드5 스킨 내용 검색

회원로그인

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