링크
http://hnbuilder.net/demo/g5/skin/latest/swiper_parallax.html (1329) http://hnbuilder.net/bbs/board.php?bo_table=user_skin&wr_id=9 (668)
수평, 수직 방향의 swiper parallax 스크롤 슬라이더입니다.
버튼, 키보드, 마우스휠 등으로 컨트롤 할 수 있습니다.
유의사항
배경이미지는 현재 문서 위치에서 상대경로로 지정해 주세요.
게시물 내용이 길면 잘릴 수 있으므로 이미지와 내용을 적당한 길이로 구성해 주세요.
사용법
• Swiper: http://idangero.us/swiper/
버튼, 키보드, 마우스휠 등으로 컨트롤 할 수 있습니다.
유의사항
배경이미지는 현재 문서 위치에서 상대경로로 지정해 주세요.
게시물 내용이 길면 잘릴 수 있으므로 이미지와 내용을 적당한 길이로 구성해 주세요.
사용법
<?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/
댓글 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>
이렇게 적용하면 되네요. ㅎㅎ 감사합니다!
다운받은 파일중에 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) { ?>
// 원본이미지 출력
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에서도 작동이 안되는데 혹시 어쩔 수 없는 부분인가요?
그런데 익스 9에서도 작동이 안되는데 혹시 어쩔 수 없는 부분인가요?
YeChanDo
8년 전
감사합니다.
8년 전
감사합니다!!
게시판 목록
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 2684 | 게시판 | 3개월 전 | 723 | ||
| 2683 | 회원가입 |
 토루크막토 |
3개월 전 | 624 | |
| 2682 | 게시판 | 4개월 전 | 587 | ||
| 2681 | 최신글 | 4개월 전 | 1054 | ||
| 2680 | 최신글 | 4개월 전 | 720 | ||
| 2679 | 회원통합스킨 | 4개월 전 | 666 | ||
| 2678 | 최신글 | 5개월 전 | 794 | ||
| 2677 | 게시판 | 5개월 전 | 1423 | ||
| 2676 | 게시판 | 5개월 전 | 869 | ||
| 2675 | 레이아웃 | 5개월 전 | 927 | ||
| 2674 | 갤러리 | 5개월 전 | 737 | ||
| 2673 | 게시판 | 5개월 전 | 809 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기