그누보드 - Swiper Parallax 슬라이더

Swiper Parallax 슬라이더 정보

최신글 Swiper Parallax 슬라이더

첨부파일

swiper_parallax.g5.zip (113.3K) 209회 다운로드 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/

댓글 전체

쪼탱 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

16.04.10 12:54:12

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

쪼탱 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

16.04.10 13:03:01

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

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

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

가나라다 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

16.04.27 19:11:51

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

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