Javascript JSSOR滑块我无法将导航箭头或项目符号链接到幻灯片过渡

我正在向网页添加JSSOR滑块。它在页面上看起来很棒，但是导航箭头和项目符号没有连接到图像转换。我已经看过其他类似问题的回复，但无法理解。此外，只有一个子弹，我希望有四个子弹（因为我有四张图片）。谢谢你的帮助

<div id="main_content">  <!-- Start Main Content -->

<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<script>

    jssor_slider1_starter = function (containerId) {

        //Reference http://www.jssor.com/development/slider-with-caption-no-jquery.html
        //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
        //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html




        var _CaptionTransitions = [
        //FADE
        {$Duration:900,$Opacity:2}




        ];

        var options = {
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0,                                   //[Optional] Space between each slide in pixels, default value is 0
            $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1,                                   //[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).
            $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $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 $DisplayPieces is greater than 1, or parking position is not 0)

            $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
            },

            $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            },

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };
        var jssor_slider1 = new $JssorSlider$(containerId, options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1000));
            else
                $Jssor$.$Delay(ScaleSlider, 30);
        }

        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);


        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
        }

        //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
        //    $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        //}
        //responsive code end
    };
</script>

    <!-- 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: #000000; 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: 1000px; height: 420px; overflow: hidden;">
        <div>
            <img u="image" src="Images/image5.jpg" />
            <div u=caption t="*" class="captionOrange"  style="position:absolute; right:20px; top: 30px; width:300px; height:30px;"> 
            great location
            </div>
        </div>
        <div>
            <img u="image" src="Images/image7.jpg" />
            <div u=caption t="*" class="captionBlack"  style="position:absolute; left:20px; top: 30px; width:300px; height:30px;"> 
            swimming pool
            </div>
        </div>
        <div>
            <img u="image" src="Images/image8.jpg" />
            <div u=caption t="*" class="captionOrange"  style="position:absolute; right:20px; top: 30px; width:300px; height:30px;"> 
            lots of fun
            </div>
        </div>
        <div>
            <img u="image" src="Images/image9.jpg" />
            <div u=caption t="*" class="captionBlack"  style="position:absolute; left:20px; top: 30px; width:300px; height:30px;"> 
            life's a beach
            </div>
        </div>

        </div>
    </div>
    <!-- Bullet Navigator Skin Begin -->
    <!-- jssor slider bullet navigator skin 01 -->
    <style>
        /*
        .jssorb01 div           (normal)
        .jssorb01 div:hover     (normal mouseover)
        .jssorb01 .av           (active)
        .jssorb01 .av:hover     (active mouseover)
        .jssorb01 .dn           (mousedown)
        */
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #000 1px solid;
        }

        .jssorb01 div {
            background-color: gray;
        }

            .jssorb01 div:hover, .jssorb01 .av:hover {
                background-color: #d3d3d3;
            }

        .jssorb01 .av {
            background-color: #fff;
        }

        .jssorb01 .dn, .jssorb01 .dn:hover {
            background-color: #555555;
        }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb01" style="position: absolute; bottom: 50px; right: 50px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
    </div>
    <!-- Bullet Navigator Skin End -->

    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 02 css */
        /*
        .jssora02l              (normal)
        .jssora02r              (normal)
        .jssora02l:hover        (normal mouseover)
        .jssora02r:hover        (normal mouseover)
        .jssora02ldn            (mousedown)
        .jssora02rdn            (mousedown)
        */
        .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(img/a02.png) no-repeat;
            overflow:hidden;
        }
        .jssora02l { background-position: -3px -33px; }
        .jssora02r { background-position: -63px -33px; }
        .jssora02l:hover { background-position: -123px -33px; }
        .jssora02r:hover { background-position: -183px -33px; }
        .jssora02ldn { background-position: -243px -33px; }
        .jssora02rdn { background-position: -303px -33px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 360px; left: 200px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 360px; right: 200px">
    </span>
    <!-- Arrow Navigator Skin End -->

    <a style="display: none" href="http://www.jssor.com">javascript image slider</a>
    <!-- Trigger -->
    <script>
        jssor_slider1_starter('slider1_container');
    </script>
</div>
<!-- Jssor Slider End -->

jssor\u滑块1\u启动器=功能（容器ID）{
//参考文献http://www.jssor.com/development/slider-with-caption-no-jquery.html
//参考文献http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
//参考文献http://www.jssor.com/development/tool-caption-transition-viewer.html
变量_字幕转换=[
//褪色
{$Duration:900，$Opacity:2}
];
变量选项={
$AutoPlay:true，//[可选]是否自动播放，若要启用幻灯片放映，此选项必须设置为true，默认值为false
$AutoPlaySteps:1，//[可选]每个导航请求的步骤（此选项仅在禁用幻灯片放映时适用），默认值为1
$AutoPlayInterval:4000，//[可选]自上一张幻灯片停止后转到下一张幻灯片的时间间隔（毫秒），如果滑块是自动播放的，默认值为3000
$PauseOnHover:1，//[可选]如果滑块自动播放，鼠标悬停时是否暂停，0不暂停，1桌面暂停，2触摸设备暂停，3桌面和触摸设备暂停，4桌面冻结，8触摸设备冻结，12桌面和触摸设备冻结，默认值为1
$ArrowKeyNavigation:true，//[可选]是否允许键盘（箭头键）导航，默认值为false
$SlideDuration:500，//[可选]指定幻灯片的默认持续时间（以毫秒为单位），默认值为500
$MindragOffsetOSLIDE:20，//[可选]触发幻灯片的最小拖动偏移，默认值为20
//$SlideWidth:600，//[可选]每个幻灯片的宽度（以像素为单位），默认值为“幻灯片”容器的宽度
//$SlideHeight:300，//[可选]每个幻灯片的高度（以像素为单位），默认值为“幻灯片”容器的高度
$SlideSpacing:0，//[可选]每张幻灯片之间的间距（以像素为单位），默认值为0
$DisplayPieces:1，//[可选]要显示的片段数（如果该值设置为大于1，则幻灯片将被禁用），默认值为1
$ParkingPosition:0，//[可选]驻车幻灯片的偏移位置（此选项仅在禁用幻灯片放映时适用），默认值为0。
$UISearchMode:1，//[可选]搜索UI组件（幻灯片容器、加载屏幕、导航器容器、箭头导航器容器、缩略图导航器容器等）的方式（0并行，1递归，默认值为1）。
$PlayOrientation:1、//[可选]播放幻灯片的方向（用于自动播放、导航）、1水平、2垂直、5水平反转、6垂直反转，默认值为1
$DRAGORIENTION:3，//[可选]拖动幻灯片的方向，0不拖动，1水平，2垂直，3任意，默认值为1（请注意，$DISPLAYPIGES大于1或停车位置不为0时，$DRAGORIENTION应与$PLAYORIENTION相同）
$CaptionSliderOptions:{//[可选]选项，用于指定如何设置标题动画
$Class:$JssorCaptionSlider$，//[Required]类来创建实例以设置标题动画
$CAPTIONTRANSTIONS:_CAPTIONTRANSTIONS，//[必需]播放字幕的字幕转换数组，请参阅jssor幻灯片转换生成器中的字幕转换部分
$PlayInMode:1，//[可选]0无（无播放），1链（在主幻灯片之后），3链展平（在主幻灯片之后并展平所有字幕动画），默认值为1
$PlayOutMode:3//[可选]0无（无播放），1链（位于主幻灯片之前），3链展平（位于主幻灯片之前并展平所有字幕动画），默认值为1
},
$BulletNavigatorOptions:{//[可选]用于指定和启用或不启用导航器的选项
$Class:$JssorBulletNavigator$，/[必需]类来创建navigator实例
$ChanceToShow:2，//[必需]0从不，1次鼠标悬停，2次始终
$AutoCenter:1，//[可选]父容器中的自动居中导航器，0无，1水平，2垂直，3两者，默认值为0
$Steps:1，//[可选]每个导航请求的步骤，默认值为1
$Lanes:1，//[可选]指定用于排列项目的通道，默认值为1
$SpacingX:10，//[可选]每个项目之间的水平间距（以像素为单位），默认值为0
$SpacingY:10，//[可选]每个项目之间的垂直间距（以像素为单位），默认值为0
$Orientation:1/[可选]导航器的方向，1水平，2垂直，默认值为1
    </div>

    </div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->

    </div>

</div>
<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->