相同的图像滑块在同一侧出现2次

我在我的网站上使用imageslider"slider with arrow navigator.source"。运行这个没有问题。但我想在一个网站上使用这个滑块更多次不同的图片。我必须更改代码中的哪些内容？或者这不可能吗？我试过复制和粘贴代码，并更改图片，但一次只有一个滑块有效。。。

----java代码（头）---

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (40KB) instead for release -->
<!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $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)
            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 0,                                 //[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$("slider1_container", options);
    });
</script>

-----来自我的网站（正文）的代码---

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        <div><img u="image" src="../fenster/img_testslide_01.jpg" /></div>
        <div><img u="image" src="../fenster/img_testslide_02.jpg" /></div>
        <div><img u="image" src="../fenster/img_testslide_03.jpg" /></div>
        <div><img u="image" src="../fenster/img_testslide_04.jpg" /></div>
        <div><img u="image" src="../img/photography/006.jpg" /></div>
        <div><img u="image" src="../img/photography/007.jpg" /></div>
        <div><img u="image" src="../img/photography/008.jpg" /></div>
    </div>
    <!-- Arrow Navigator Skin Begin -->
    <style>
        /* jssor slider arrow navigator skin 03 css */
        /*
        .jssora03l              (normal)
        .jssora03r              (normal)
        .jssora03l:hover        (normal mouseover)
        .jssora03r:hover        (normal mouseover)
        .jssora03ldn            (mousedown)
        .jssora03rdn            (mousedown)
        */
        .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
        {
            position: absolute;
            cursor: pointer;
            display: block;
            background: url(../bilder/a03.png) no-repeat;
            overflow:hidden;
        }
        .jssora03l { background-position: -3px -33px; }
        .jssora03r { background-position: -63px -33px; }
        .jssora03l:hover { background-position: -123px -33px; }
        .jssora03r:hover { background-position: -183px -33px; }
        .jssora03ldn { background-position: -243px -33px; }
        .jssora03rdn { background-position: -303px -33px; }
    </style>
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
    </span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
    </span>
    <!-- Arrow Navigator Skin End -->
    <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
</div>
<!-- Jssor Slider End -->