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>