Two independent jssor sliders in one page

Question

I have used jssor slider in my page. First I used jssor slider only for main banner section. Later I want to include this slider in another feature section. I copied jssor_1_slider_init = function() and paste with jssor_2_slider_init = function(). But it doesn't work. How to include two independent jssor slider in one page ? The first code is working, second one doesn't work.

<script type="text/javascript" src="js/jssor.slider.min.js"></script>
    <!-- use jssor.slider.debug.js instead for debug -->
    <script>
        jssor_1_slider_init = function() {

            var jssor_1_options = {
              $AutoPlay: true,
              $AutoPlaySteps: 4,
              $SlideDuration: 160,
              $SlideWidth: 200,
              $SlideSpacing: 3,
              $Cols: 4,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $Steps: 4
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $SpacingX: 1,
                $SpacingY: 1
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 809);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //responsive code end
        };
    </script>

    <!-- use jssor.slider.debug.js instead for debug -->
    <script>
        jssor_2_slider_init = function() {

            var jssor_2_options = {
              $AutoPlay: true,
              $AutoPlaySteps: 4,
              $SlideDuration: 160,
              $SlideWidth: 200,
              $SlideSpacing: 3,
              $Cols: 4,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $Steps: 4
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $SpacingX: 1,
                $SpacingY: 1
              }
            };

            var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 809);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }
            ScaleSlider();
            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //responsive code end
        };
    </script>


      <div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
                    <?php
                        $query="select img, heading from slide_images order by id desc";
                        $result=$con->query($query)or die($con->error);
                        while($row=$result->fetch_assoc()){?>
        <div id="non">
                    <img src="images/<?php echo $row['img'];?>" />
                    <div u="thumb"><?php echo $row['heading'];?></div>
                </div>
                    <?php } ?>
        </div>
        </div>

      <div id="jssor_1" style="position:relative;margin:-23px auto 0 auto;top:0px;left:0px;width:980px;height:550px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div style="position:absolute;top:0px;left:0px;background:url('img/loading.gif') no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:560px;overflow:hidden;">
                    <?php
                        $query="select img, heading from feature order by id desc";
                        $result=$con->query($query)or die($con->error);
                        while($row=$result->fetch_assoc()){?>
        <div id="non">
                    <img src="images/<?php echo $row['img'];?>" />
                    <div u="thumb"><?php echo $row['heading'];?></div>
                </div>
                    <?php } ?>
        </div>
        </div>
     <script>
            jssor_1_slider_init();
           jssor_2_slider_init();
     </script>

Answer 1

You have two divs with id="jssor_1" but none with id="jssor_2"