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

Question

我在我的网站上使用图像滑块“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 -->

Answer 1

不同的滑块使用不同的名称。 请将第二个滑块中的所有“slider1”替换为“slider2”。

参考：Issues when adding 2 Jssor sliders