我试图获得一个图像库（尽管不仅有图像，让我们称之为元素）用箭头移动并显示两个元素。我也想让他们自己动起来。 使用此代码，我得到一个箭头工作的元素库，元素自己移动，但我只能看到一个。也许它不受支持，但我想知道是否可以这样做。
提前致谢！
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');
}
});
结果：
答案 0 :(得分：0)
我认为你需要一个尺寸为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",
答案 1 :(得分：0)
正确的解决方案
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>