無法創建帶箭頭的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; }

BundleConfig：

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的滑塊滑塊。 並在“幻燈片”容器中顯示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>