在滑块上添加滚动以滑动图像

Question

jssor_1_slider_init = function() {

            var jssor_1_options = {
              $AutoPlay: 0,
              $DragOrientation: 2,
              $PlayOrientation: 2,
			  $Loop: 0,                                      // Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, 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: 5,                                   //[Optional] Space between each slide in pixels, default value is 0
    $Cols: 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
    $Align: 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).
  
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              }
            };

            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, 1350);
                    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*/
        };
    jssor_1_slider_init();

 /* jssor slider arrow navigator skin 08 css */
        /*
        .jssora08l                  (normal)
        .jssora08r                  (normal)
        .jssora08l:hover            (normal mouseover)
        .jssora08r:hover            (normal mouseover)
        .jssora08l.jssora08ldn      (mousedown)
        .jssora08r.jssora08rdn      (mousedown)
        .jssora08l.jssora08lds      (disabled)
        .jssora08r.jssora08rds      (disabled)
        */
        .jssora08l, .jssora08r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 50px;
            height: 50px;
            cursor: pointer;
            background: url('http://www.jssor.com/theme/img/a08.png') no-repeat;
            overflow: hidden;
            opacity: .4;
            filter: alpha(opacity=40);
        }
        .jssora08l { background-position: -5px -35px; }
        .jssora08r { background-position: -65px -35px; }
        .jssora08l:hover { background-position: -5px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora08r:hover { background-position: -65px -35px; opacity: .8; filter:alpha(opacity=80); }
        .jssora08l.jssora08ldn { background-position: -5px -35px; opacity: .3; filter:alpha(opacity=30); }
        .jssora08r.jssora08rdn { background-position: -65px -35px; opacity: .3; filter:alpha(opacity=30); }
        .jssora08l.jssora08lds { background-position: -5px -35px; opacity: .3; pointer-events: none; }
        .jssora08r.jssora08rds { background-position: -65px -35px; opacity: .3; pointer-events: none; }

 <script src="http://www.deborn.be/NieuweSite/js/jssor.slider-22.0.6.min.js" type="text/javascript"></script> 
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1350px; height: 400px; overflow: hidden; visibility: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; 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>
        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1350px; height: 400px; overflow: hidden;">
            <div data-p="112.50">
                <img data-u="image" src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
                <img data-u="image" src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
            </div>
            
           
            <a data-u="any" href="http://www.jssor.com" style="display:none">Vertical Slider</a>
        </div>
        <!-- Arrow Navigator -->
        
        <span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;border:1px solid red;" data-autocenter="1"></span>
    </div>

我的问题是当我在图像上滚动我的图像不是slide.i必须将滚动效果放在滑块上以不使用箭头按钮滑动图像。 幻灯片图片只有一次没有时间。 并且当我滚动时添加滑块图像滑动一次比滚动剩余的身体内容体

之后