向jssor滑块的缩略图添加箭头

我有一个基本的Jssor滑块，缩略图在左侧垂直，图像在右侧。我想添加箭头，以便能够上下滚动缩略图。你能让我知道我应该添加什么代码和在哪里吗？谢谢

<script>
    jQuery(document).ready(function ($) {
        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $Idle: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
            $UISearchMode: 0,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).

            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                $Loop: 1,                                       //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
                $SpacingX: 3,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                $SpacingY: 3,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                $Cols: 6,                              //[Optional] Number of pieces to display, default value is 1
                $Align: 253,                          //[Optional] The offset position to park thumbnail,

                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $Steps: 6                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$ScaleWidth(Math.min(parentWidth, 720));
            else
                window.setTimeout(ScaleSlider, 30);
        }
        ScaleSlider();

        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. --> 
<div id="slider1_container" style="position: relative; width: 720px;
    height: 480px; overflow: hidden;">

    <!-- Loading Screen -->
    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
            background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
            top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
    </div>

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 720px; height: 480px;
        overflow: hidden;">
        <div>
            <img u="image" src="../img/travel/01.jpg" />
            <img u="thumb" src="../img/travel/thumb-01.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/02.jpg" />
            <img u="thumb" src="../img/travel/thumb-02.jpg" />
        </div>
        <!--<div>
            <img u="image" src="../img/travel/03.jpg" />
            <img u="thumb" src="../img/travel/thumb-03.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/04.jpg" />
            <img u="thumb" src="../img/travel/thumb-04.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/05.jpg" />
            <img u="thumb" src="../img/travel/thumb-05.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/06.jpg" />
            <img u="thumb" src="../img/travel/thumb-06.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/07.jpg" />
            <img u="thumb" src="../img/travel/thumb-07.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/08.jpg" />
            <img u="thumb" src="../img/travel/thumb-08.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/09.jpg" />
            <img u="thumb" src="../img/travel/thumb-09.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/10.jpg" />
            <img u="thumb" src="../img/travel/thumb-10.jpg" />
        </div>

        <div>
            <img u="image" src="../img/travel/11.jpg" />
            <img u="thumb" src="../img/travel/thumb-11.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/12.jpg" />
            <img u="thumb" src="../img/travel/thumb-12.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/13.jpg" />
            <img u="thumb" src="../img/travel/thumb-13.jpg" />
        </div>
        <div>
            <img u="image" src="../img/travel/14.jpg" />
            <img u="thumb" src="../img/travel/thumb-14.jpg" />
        </div>-->
    </div>
    <!--#region Thumbnail Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html -->
    <style>
        /* jssor slider thumbnail navigator skin 07 css */
        /*
        .jssort07 .p            (normal)
        .jssort07 .p:hover      (normal mouseover)
        .jssort07 .pav          (active)
        .jssort07 .pav:hover    (active mouseover)
        .jssort07 .pdn          (mousedown)
        */
        .jssort07 {
            position: absolute;
            /* size of thumbnail navigator container */
            width: 800px;
            height: 100px;
        }

            .jssort07 .p {
                position: absolute;
                top: 0;
                left: 0;
                width: 99px;
                height: 66px;
            }

            .jssort07 .i {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 99px;
                height: 66px;
                filter: alpha(opacity=80);
                opacity: .8;
            }

            .jssort07 .p:hover .i, .jssort07 .pav .i {
                filter: alpha(opacity=100);
                opacity: 1;
            }

            .jssort07 .o {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 97px;
                height: 64px;
                border: 1px solid #000;
                box-sizing: content-box;
                transition: border-color .6s;
                -moz-transition: border-color .6s;
                -webkit-transition: border-color .6s;
                -o-transition: border-color .6s;
            }

            .jssort07 .pav .o {
                border-color: #0099ff;
            }

            .jssort07 .p:hover .o {
                border-color: #fff;
                transition: none;
                -moz-transition: none;
                -webkit-transition: none;
                -o-transition: none;
            }

            .jssort07 .p.pdn .o {
                border-color: #0099ff;
            }

            * html .jssort07 .o {
                /* ie quirks mode adjust */
                width /**/: 99px;
                height /**/: 66px;
            }
    </style>
    <!-- thumbnail navigator container -->
    <div u="thumbnavigator" class="jssort07" style="width: 720px; height: 100px; left: 0px; bottom: 0px;">
        <!-- Thumbnail Item Skin Begin -->
        <div u="slides" style="cursor: default;">
            <div u="prototype" class="p">
                <div u="thumbnailtemplate" class="i"></div>
                <div class="o"></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
        <!--#region Arrow Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
        <style>
            /* jssor slider arrow navigator skin 11 css */
            /*
            .jssora11l                  (normal)
            .jssora11r                  (normal)
            .jssora11l:hover            (normal mouseover)
            .jssora11r:hover            (normal mouseover)
            .jssora11l.jssora11ldn      (mousedown)
            .jssora11r.jssora11rdn      (mousedown)
            */
            .jssora11l, .jssora11r {
                display: block;
                position: absolute;
                /* size of arrow element */
                width: 37px;
                height: 37px;
                cursor: pointer;
                background: url(../img/a11.png) no-repeat;
                overflow: hidden;
            }

            .jssora11l {
                background-position: -11px -41px;
            }

            .jssora11r {
                background-position: -71px -41px;
            }

            .jssora11l:hover {
                background-position: -131px -41px;
            }

            .jssora11r:hover {
                background-position: -191px -41px;
            }

            .jssora11l.jssora11ldn {
                background-position: -251px -41px;
            }

            .jssora11r.jssora11rdn {
                background-position: -311px -41px;
            }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
    </div>
    <!--#endregion Thumbnail Navigator Skin End -->
    <!-- Trigger -->
</div>
<!-- Jssor Slider End -->

jQuery（文档）.ready（函数（$）{
变量选项={
$AutoPlay:true，//[可选]是否自动播放，若要启用幻灯片放映，此选项必须设置为true，默认值为false
$Idle:4000，//[可选]自上一张幻灯片停止后开始播放下一张幻灯片的间隔（毫秒），如果滑块自动播放，默认值为3000
$SlideDuration:500，//[可选]指定幻灯片的默认持续时间（以毫秒为单位），默认值为500
$DRAGORIENTION:3，//[可选]拖动幻灯片的方向，0无拖动，1水平，2垂直，3任意，默认值为1（请注意，$Cols大于1或停车位置不为0时，$DRAGORIENTION应与$PLAYORIENTION相同）
$UISearchMode:0，//[可选]搜索UI组件（幻灯片容器、加载屏幕、导航器容器、箭头导航器容器、缩略图导航器容器等）的方式（0并行，1递归，默认值为1）。
$ThumbnailNavigator选项：{
$Class:$jssorthumbnailnailnavigator$，/[Required]类来创建缩略图导航器实例
$ChanceToShow:2，//[必需]0从不，1次鼠标悬停，2次始终
$Loop:1，//[可选]是否启用转盘的循环（循环），0:stop，1:Loop，2 rewind，默认值为1
$SpacingX:3，//[可选]每个缩略图之间的水平间距（以像素为单位），默认值为0
$SpacingY:3，//[可选]每个缩略图之间的垂直间距（以像素为单位），默认值为0
$Cols:6，//[可选]要显示的件数，默认值为1
$Align:253，//[可选]驻车缩略图的偏移位置，
$Arrow导航选项：{
$Class:$jssorarrowsnavigator$，//[Required]类创建箭头导航器实例
$ChanceToShow:2，//[必需]0从不，1次鼠标悬停，2次始终
$Steps:6//[可选]每个导航请求的步骤，默认值为1
}
}
};
var jssor_slider1=新的$JssorSlider$（“slider1_容器”，选项）；
//响应代码开始
//如果不希望在调整窗口大小时滑块缩放，可以删除响应代码
函数ScaleSlider（）{
var parentWidth=jssor_slider1.$Elmt.parentNode.clientWidth；
如果（父宽度）
jssor_slider1.$ScaleWidth（Math.min（parentWidth，720））；
其他的
设置超时（ScaleSlider，30）；
}
ScaleSlider（）；
$（窗口）.bind（“加载”，ScaleSlider）；
$（窗口）。绑定（“调整大小”，缩放滑块）；
$（窗口）.bind（“方向更改”，缩放滑块）；
//响应代码端
});
/*jssor滑块缩略图导航器皮肤07 css*/
/*
.jssort07.p（正常）
.jssort07.p:悬停（正常鼠标悬停）
.jssort07.pav（活动）
.jssort07.pav:悬停（活动鼠标悬停）
.jssort07.pdn（鼠标向下）
*/
.jssort07{
位置：绝对位置；
/*缩略图导航器容器的大小*/
宽度：800px；
高度：100px；
}
.jssort07.p{
位置：绝对位置；
排名：0；
左：0；
宽度：99px；
高度：66px；
}
.jssort07.i{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：99px；
高度：66px；
过滤器：α（不透明度=80）；
不透明度：.8；
}
.jssort07.p:hover.i、.jssort07.pav.i{
过滤器：α（不透明度=100）；
不透明度：1；
}
.jssort07.o{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：97px；
高度：64px；
边框：1px实心#000；
框大小：内容框；
过渡：边框颜色。6s；
-moz过渡：边框颜色。6s；
-webkit过渡：边框颜色。6s；
-o-过渡：边框颜色。6s；
}
.jssort07.pav.o{
边框颜色：#0099ff；
}
.jssort07.p:hover.o{
边框颜色：#fff；
过渡：无；
-moz转换：无；
-webkit转换：无；
-o-转变：无；
}
.jssort07.p.pdn.o{
边框颜色：#0099ff；
}
*jssort07.o{
/*ie怪癖模式调整*/
宽度/**/：99px；
高度/**/：66px；
}