Slider Pro 슬라이더 질문해도 될까요?
본문
Slider Pro를 사용하여 pager가 탭으로 나타나는 슬라이더를 구현했습니다.
하나 문제가 있는데 prev으로 스와이프를 하면 전 슬라이드 화면이 나타나지 않는 문제가 있습니다.
그냥 하얗기만하고 오직 next방향으로만 정상 작동 됩니다.
혹시 문제가 뭔지 알수 있을까요?
(아래 코드 외에 기본 slider pro 슬라이더 코드는 원본과 동일합니다.)
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//////////////////////////////
// 슬라이드의 가로와 세로크기를 지정합니다.
// 단위는 PX입니다.
$Slide_Width = 1000;
$Slide_Height = 594;
// 이미지 크기
// 이미지 크기는 관리자 설정페이지의 설정을 우선시합니다.
if ($options) {
$tmp = explode("|", $options);
$thumb_width = $tmp[0];
$thumb_height = $tmp[1];
} else {
$thumb_width = $Slide_Width;
$thumb_height = $Slide_Height;
}
?>
<style>
.sp-thumbnail { display: inline-block; /*width: 250px; */height: 55px; line-height: 55px; text-align: center; float: left; font-size: 20px; font-weight: bold; border-right: 1px solid #999 !important; }
.sp-thumbnails > div:last-child .sp-thumbnail { border-right: none !important;}
.sp-bottom-thumbnails .sp-thumbnail-container, .sp-top-thumbnails .sp-thumbnail-container { margin:0 !important; }
.sp-bottom-thumbnails .sp-thumbnail-container { background: #fff; }
.sp-selected-thumbnail .sp-thumbnail { background:#ffd800; }
.sp-thumbnails div:only-child {width: 100% !important; margin-right: 0%;}
.sp-thumbnails div:nth-last-child(2), .sp-thumbnails div:nth-last-child(2)+div {width: 50% !important;}
.sp-thumbnails div:nth-last-child(3), .sp-thumbnails div:nth-last-child(3)~div {width: 33.33% !important;}
.sp-thumbnails div:nth-last-child(4), .sp-thumbnails div:nth-last-child(4)~div {width: 25% !important;}
</style>
<link rel="stylesheet" type="text/css" href="<?php echo $latest_skin_url ?>/Plugin/slider-pro-master/dist/css/slider-pro.min.css" media="screen"/>
<script src="<?php echo $latest_skin_url ?>/Plugin/slider-pro-master/dist/js/jquery.sliderPro.js"></script>
<script type="text/javascript" src="<?php echo $latest_skin_url ?>/Plugin/slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>
<div id="slide_wrap">
<!-- SLIDE 시작 -->
<div id="slide" class="slider-pro">
<div class="slider-pro">
<div class="sp-slides">
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height);
if($thumb['src']) {
$thumb_url = $thumb['src'];
} else {
$thumb_url = $latest_skin_url."/Plugin/slider-pro-master/dist/css/images/blank.gif";
}
if($list[$i]['wr_link1']) {
echo "<div class='sp-slide' onclick=\"location.href = '{$list[$i]['wr_link1']}';\" >";
} else {
echo "<div class='sp-slide'>";
}
echo "<img class='sp-image' src='{$latest_skin_url}/Plugin/slider-pro-master/dist/css/images/blank.gif'";
echo " data-src='{$thumb_url}'";
echo " />";
echo " </div>";
} ?>
<div class="sp-thumbnails">
<?php for ($i=0; $i<count($list); $i++) { ?>
<div class="sp-thumbnail">
<?php echo $list[$i]['wr_subject'] ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<!-- // SLIDE 종료 -->
</div>
<script type="text/javascript">
$( document ).ready(function( $ ) {
$( '#slide' ).sliderPro({
width: <?php echo $Slide_Width ?>,
height: <?php echo $Slide_Height ?>,
arrows: true,
buttons: false,
waitForLayers: true,
thumbnailWidth: 250,
thumbnailHeight: 55,
thumbnailPointer: true,
autoplay: true,
autoScaleLayers: false,
breakpoints: {
500: {
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
});
</script>
!-->
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//////////////////////////////
// 슬라이드의 가로와 세로크기를 지정합니다.
// 단위는 PX입니다.
$Slide_Width = 1000;
$Slide_Height = 594;
// 이미지 크기
// 이미지 크기는 관리자 설정페이지의 설정을 우선시합니다.
if ($options) {
$tmp = explode("|", $options);
$thumb_width = $tmp[0];
$thumb_height = $tmp[1];
} else {
$thumb_width = $Slide_Width;
$thumb_height = $Slide_Height;
}
?>
<style>
.sp-thumbnail { display: inline-block; /*width: 250px; */height: 55px; line-height: 55px; text-align: center; float: left; font-size: 20px; font-weight: bold; border-right: 1px solid #999 !important; }
.sp-thumbnails > div:last-child .sp-thumbnail { border-right: none !important;}
.sp-bottom-thumbnails .sp-thumbnail-container, .sp-top-thumbnails .sp-thumbnail-container { margin:0 !important; }
.sp-bottom-thumbnails .sp-thumbnail-container { background: #fff; }
.sp-selected-thumbnail .sp-thumbnail { background:#ffd800; }
.sp-thumbnails div:only-child {width: 100% !important; margin-right: 0%;}
.sp-thumbnails div:nth-last-child(2), .sp-thumbnails div:nth-last-child(2)+div {width: 50% !important;}
.sp-thumbnails div:nth-last-child(3), .sp-thumbnails div:nth-last-child(3)~div {width: 33.33% !important;}
.sp-thumbnails div:nth-last-child(4), .sp-thumbnails div:nth-last-child(4)~div {width: 25% !important;}
</style>
<link rel="stylesheet" type="text/css" href="<?php echo $latest_skin_url ?>/Plugin/slider-pro-master/dist/css/slider-pro.min.css" media="screen"/>
<script src="<?php echo $latest_skin_url ?>/Plugin/slider-pro-master/dist/js/jquery.sliderPro.js"></script>
<script type="text/javascript" src="<?php echo $latest_skin_url ?>/Plugin/slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>
<div id="slide_wrap">
<!-- SLIDE 시작 -->
<div id="slide" class="slider-pro">
<div class="slider-pro">
<div class="sp-slides">
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height);
if($thumb['src']) {
$thumb_url = $thumb['src'];
} else {
$thumb_url = $latest_skin_url."/Plugin/slider-pro-master/dist/css/images/blank.gif";
}
if($list[$i]['wr_link1']) {
echo "<div class='sp-slide' onclick=\"location.href = '{$list[$i]['wr_link1']}';\" >";
} else {
echo "<div class='sp-slide'>";
}
echo "<img class='sp-image' src='{$latest_skin_url}/Plugin/slider-pro-master/dist/css/images/blank.gif'";
echo " data-src='{$thumb_url}'";
echo " />";
echo " </div>";
} ?>
<div class="sp-thumbnails">
<?php for ($i=0; $i<count($list); $i++) { ?>
<div class="sp-thumbnail">
<?php echo $list[$i]['wr_subject'] ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<!-- // SLIDE 종료 -->
</div>
<script type="text/javascript">
$( document ).ready(function( $ ) {
$( '#slide' ).sliderPro({
width: <?php echo $Slide_Width ?>,
height: <?php echo $Slide_Height ?>,
arrows: true,
buttons: false,
waitForLayers: true,
thumbnailWidth: 250,
thumbnailHeight: 55,
thumbnailPointer: true,
autoplay: true,
autoScaleLayers: false,
breakpoints: {
500: {
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
});
</script>
답변 2
PREV 해도 전 이미지랑 탭 표시는 잘 되는것 같습니다.
슬라이드 방향이 한쪽으로만 되는게 문제아닌 문제인것 같네요.
소스상으로 추측되는건 없어보입니다.
개발자도구로 무슨 오류인지 확인해봐야할 것 같습니다.
제이쿼리단에서 오류가 났거나 할것 같은데요
괜찮으시다면 사이트 주소도 남겨주시면 좋을것 같습니다
답변을 작성하시기 전에 로그인 해주세요.