Swiper Parallax 슬라이더

휴온

· 9년 전 · 조회 13594 13594 · 댓글 6 6

링크

http://hnbuilder.net/demo/g5/skin/latest/swiper_parallax.html (1334) http://hnbuilder.net/bbs/board.php?bo_table=user_skin&wr_id=9 (669)

수평, 수직 방향의 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/

#PC용 #모바일용

첨부파일

swiper_parallax.jpg (132.6 KB) 0회 2016-04-09 17:27

swiper_parallax.g5.zip (113.3 KB) 213회 2016-04-09 17:27

글쓰기

댓글 6개

쪼탱

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전

오 감사합니다! 데모중에 AutoPlay도 가능하시면 부탁드려도 될까요?ㅎㅎㅎㅎ

쪼탱

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전

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

다운받은 파일중에 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>

이렇게 적용하면 되네요. ㅎㅎ 감사합니다!

가나라다

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전

아래코드처럼 적용하면 되는지요..ㅜ.ㅜ

// 원본이미지 출력
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) { ?>

모제코

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전

좋은 슬라이더 감사합니다.
그런데 익스 9에서도 작동이 안되는데 혹시 어쩔 수 없는 부분인가요?