无法创建带箭头的 Jssor Slider 并在内部显示 2 件

Question

我试图获得一个图片库（尽管不仅有图像，我们称它们为元素）带有箭头供它们移动并显示两个元素。我也希望他们自己移动。使用此代码，我得到了一个元素库，其中箭头起作用，元素自行移动，但我一次只能看到一个。也许不支持，但我想知道是否可以这样做。

提前致谢！

HTML:

 <div id="slider1_container" style="position: relative; width: 300px; height: 200px; overflow: hidden;">
           <!-- Slides Container --> 
           <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 140px; height: 200px; overflow: hidden;">
              @foreach (var Attendee in dataEvent.attendees)
               {
                   <div>
                        //DATA
                   </div>
               }
           </div>
           <!-- Arrow Left -->
           <span u="arrowleft" class="jssora01l" style="width: 28px; height: 40px; top: 123px; left: 0px !important;">
           </span>
           <!-- Arrow Right -->
           <span u="arrowright" class=" jssora01r" style="width: 28px; height: 40px; top: 123px; right: 125px !important; left: 250px !important; ">
           </span>

CSS:

.jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
            {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(../Content/images/arrows.png) no-repeat;
                overflow:hidden;
            }
            .jssora01l { background-position: -8px -38px; }
            .jssora01r { background-position: -68px -38px; }
            .jssora01l:hover { background-position: -128px -38px; }
            .jssora01r:hover { background-position: -188px -38px; }
            .jssora01ldn { background-position: -8px -38px; }
            .jssora01rdn { background-position: -68px -38px; }

捆绑配置：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.10.2.js",
                    "~/Scripts/jquery-1.10.2.min.js",
                    "~/Scripts/jquery-ui-1.10.4.custom.js",
                    "~/Scripts/chosen.jquery.js",
                    "~/Scripts/jquery-migrate-1.1.1.js",
                    "~/Scripts/fullcalendar.js",
                    "~/Scripts/fullcalendar.min.js",
                    "~/Scripts/jquery.qtip.js",
                    "~/Scripts/jquery.qtip.min.js",
                     "~/Scripts/jquery-ui-timepicker-addon.js",
                     "~/Scripts/jssor.js",
                     "~/Scripts/jssor.player.ytiframe.js",
                     "~/Scripts/jssor.player.ytiframe.min.js",
                     "~/Scripts/jssor.slider.debug.min.js",
                     "~/Scripts/jssor.slider.js",
                     "~/Scripts/jssor.slider.min.js"
                    ));

JAVASCRIPT:

 jQuery(document).ready(function ($) {
        if (maxprofile == -1) {
            jssor_slider1_starter = function (containerId) {
                var options = {
                    $DragOrientation: 1,               //[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)
                    $SlideDuration: 500,               //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                    $AutoPlay: true,
                    $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: 1,                //[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
                    },
                    $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                        $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                        $SpacingX: 0,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                        $DisplayPieces: 2,                             //[Optional] Number of pieces to display, default value is 1
                        $ParkingPosition: 360                           //[Optional] The offset position to park thumbnail
                    }
                };
                var jssor_slider1 = new $JssorSlider$(containerId, options);
            };
            jssor_slider1_starter('slider1_container');
        }
    });

我也试过这个：

jQuery(document).ready(function ($) {
            if (maxprofile == -1) {
                jssor_slider1_starter = function (containerId) {
                    var options = {
                        $DragOrientation: 1,               //[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)
                        $SlideDuration: 500,               //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                        $AutoPlay: true,
                        $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: 1,                //[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
                            $DisplayPieces: 2,             //[Optional] Number of pieces to display, default value is 1
                        },

                    };
                    var jssor_slider1 = new $JssorSlider$(containerId, options);
                };
                jssor_slider1_starter('slider1_container');
            }
        });

结果：

http://i.stack.imgur.com/cVXH9.png

Answer 1

我认为您需要一个大小为 140px x 200px 的滑块。并在 'slides' 容器中显示 2 张幻灯片。

请尝试以下操作，

<div id="slider1_container" ...>
           <!-- Slides Container --> 
           <div u="slides" style="... width: 300px; ...">


var options = {
    ...,
    $SlideWidth: 140,
    $SlideSpacing: 20,
    $DisplayPieces: 2,
    ...
}

var jssor_slider1 = new $JssorSlider$(containerId, options);

这是一个例子。 http://www.jssor.com/testcase/display-2-pieces.source.html

顺便说一句，您只需要 jssor.slider.min.js，请删除以下行，

 "~/Scripts/jssor.js",
 "~/Scripts/jssor.player.ytiframe.js",
 "~/Scripts/jssor.player.ytiframe.min.js",
 "~/Scripts/jssor.slider.debug.min.js",
 "~/Scripts/jssor.slider.js",

Answer 2

正确的解决方案

JAVASCRIPT:

jQuery(document).ready(function ($) {            
                var options = {
                    $SlideWidth: 140,
                    $SlideSpacing: 20,
                    $DisplayPieces: 2,
                    $AutoPlay: true,
                    $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: 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$("slider1_container", options);              
});

Bundle.config

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/jquery-1.10.2.min.js",
                "~/Scripts/jquery-ui-1.10.4.custom.js",
                "~/Scripts/chosen.jquery.js",
                "~/Scripts/jquery-migrate-1.1.1.js",
                "~/Scripts/fullcalendar.js",
                "~/Scripts/fullcalendar.min.js",
                "~/Scripts/jquery.qtip.js",
                "~/Scripts/jquery.qtip.min.js",
                 "~/Scripts/jquery-ui-timepicker-addon.js",
                 "~/Scripts/jssor.slider.min.js"
                ));

HTML:

<div id="slider1_container" style="position: relative; width: 300px; height: 200px; overflow: hidden;">
           <!-- Slides Container --> 
           <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 300px; height: 200px; overflow: hidden;">
                 @foreach (var Attendee in dataEvent.attendees)
                  {
                     <div>
                          //DATA
                      </div>
                  }
         </div>
         <!-- Arrow Left -->
         <span u="arrowleft" class="jssora01l" style="width: 28px; height: 40px; top: 123px; left: 0px !important;">
         </span>
         <!-- Arrow Right -->
         <span u="arrowright" class=" jssora01r" style="width: 28px; height: 40px; top: 123px; right: 125px !important; left: 250px !important; ">
         </span>
           }
      </div>

无法创建带箭头的 Jssor Slider 并在内部显示 2 件

Unable to create a Jssor Slider with arrows and display 2 pieces inside

html

javascript

navigation

arrows

jssor