스와이퍼 페이징 정보
스와이퍼 페이징
관련링크
첨부파일
본문
우선 스와이퍼 다음, 이전 게시물은 다음 링크를 참조 하세요.
게시판 스킨으로 배포하려고 하였으나 소스 추가가 너무 미비해서 냑 정책상 팁자료실에 올립니다.
본 팁은 베이직 게시판 리스트에서 스와이퍼 좌우 제스쳐로 페이징을 해주는 소스입니다.
그누보드 5.4 버전으로 설명 드립니다.
베이직 게시판 list.skin.php 파일 제일 하단에 다음 코드를 삽입합니다.
<?php
/////////////////// 스와이퍼 페이징 by 벌이뉨 22-05-31 //////////////////////////
?>
<!-- Initialize Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js"></script>
<script>
var mousePoint = 80;
var sw_po = 1;
var sw_po_jawoo = 1;
var prev_href = "";
var next_href = "";
var currentPosition=0;
var side_top = "240px";
var side_rlfet = "30px";
if(g5_is_mobile){
side_top = "150px";
side_rlfet = "5px";
}
var isEmpty = function(value){
if( value == "" || value == null || value == undefined || ( value != null && typeof value == "object" && !Object.keys(value).length ) ){
return true
}else{
return false
}
};
function go_to(url){
location.href=url;
}
$(function(){
if($(".pg_current").text() != "1"){
prev_href = $(".pg_current").prev().prev().attr("href");
}
next_href = $(".pg_current").next().next().attr("href");
if(isEmpty(prev_href)){
prev_href = "";
}
if(isEmpty(next_href)){
next_href = "";
}
$('#bo_list').wrap('<div class="swiper-root"></div>').wrap('<div class="swiper-wrapper"></div>');
$('.swiper-root').prepend('<div id="sidebox">다음 페이지</div><div id="sidebox_left">이전 페이지</div>');
$('#sidebox').css({'top': side_top,'right': side_rlfet});
$('#sidebox_left').css({'top': side_top,'left': side_rlfet});
currentPosition = parseInt($("#sidebox").css("top"));
var swiper = new Swiper('.swiper-root', {
init: false
});
swiper.on('transitionEnd', function(swiper) {
if(sw_po > mousePoint){
if(prev_href != ""){
go_to(prev_href);
}
}else if(sw_po < mousePoint*-1){
if(next_href != ""){
go_to(next_href);
}
}
});
swiper.on('setTranslate', function(swiper, translate) {
if(translate != 0) sw_po = translate;
sw_po_jawoo = translate;
if(sw_po_jawoo > 10){
if(prev_href != "")
$("#sidebox_left").fadeIn();
}else if(sw_po_jawoo < -10){
if(next_href != "")
$("#sidebox").fadeIn();
}else{
$("#sidebox_left").fadeOut();
$("#sidebox").fadeOut();
}
});
swiper.init();
});
$(window).scroll(function(){
var con_height = parseInt($(".swiper-wrapper").height());
var position = $(window).scrollTop();
var top_position = position+currentPosition;
if(con_height < top_position) top_position = con_height;
$("#sidebox").stop().animate({"top":top_position+"px"},500);
$("#sidebox_left").stop().animate({"top":top_position+"px"},500);
});
</script>
<style>
#sidebox {
width : 80px;
height : 80px;
background-color:red;
position:absolute;
display:none;
padding: 3px 2px;
border-radius: 50%;
text-align:center;
line-height:80px;
color: #fff;
font-weight: bold;
}
#sidebox_left {
width : 80px;
height : 80px;
background-color:red;
position:absolute;
display:none;
padding: 3px 2px;
border-radius: 50%;
text-align:center;
line-height:80px;
color: #fff;
font-weight: bold;
}
</style>
<?php
/////////////////// 스와이퍼 페이징 by 벌이뉨 22-05-31 //////////////////////////
?>
위 코드중 $('#bo_list') 는 게시판 리스트에서 스와이퍼를 적용할 영역입니다.
베이직 게시판이 아니신분은 적절하게 바꾸세요.
prev_href, next_href 는 게시판 페이징에서 이전 페이지, 다음 페이지 주소입니다.
jqery로 게시판 리스트 하단의 페이징 목록에서 주소를 가져 오는데 이것 또한 베이직 게시판이 아닌 경우
소스를 변경하셔야 합니다. 보시면 그리 어렵지 않을꺼예요.
관련 링크는 적용된 예시입니다. 좌우 슬라이딩을 해보세요.
추천
8
8
댓글 1개
좋아요, 감사 합니다.
