Slider Pro를 사용하여 pager가 탭으로 나타나는 슬라이더를 구현했습니다.  하나 문제가 있는데 prev으로 스와이프를 하면 전 슬라이드 화면이 나타나지 않는 문제가 있습니다.  그냥 하얗기만하고 오직 next방향으로만 정상 작동 됩니다.  혹시 문제가 뭔지 알수 있을까요? (아래 코드 외에 기본 slider pro 슬라이더 코드는 원본과 동일합니다.)

Copy

</strong></span></h1>

<p><span style="font-size:9pt;"><?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/thumbnail.lib.php');</span></p>

<p><span style="font-size:9pt;">// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨</span></p>

<p><span style="font-size:9pt;">//////////////////////////////

// 슬라이드의 가로와 세로크기를 지정합니다.

// 단위는 PX입니다.

$Slide_Width    = 1000;

$Slide_Height    = 594;</span></p>

<p><span style="font-size:9pt;">// 이미지 크기

// 이미지 크기는 관리자 설정페이지의 설정을 우선시합니다.

if ($options) {

    $tmp             = explode("|", $options);

    $thumb_width     = $tmp[0];

    $thumb_height     = $tmp[1];

} else {

    $thumb_width     = $Slide_Width;

    $thumb_height     = $Slide_Height;

}</span></p>

<p><span style="font-size:9pt;">?></span></p>

<p><span style="font-size:9pt;"><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;}</span></p>

<p><span style="font-size:9pt;"></style></span></p>

<p><span style="font-size:9pt;"><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></span></p>

<p><span style="font-size:9pt;"><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>";

                

                 } ?></span></p>

<p><span style="font-size:9pt;">                <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></span></p>

<p>

<span style="font-size:9pt;"><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></span></p>

<h1><span style="font-size:9pt;"><strong>