无法创建带有箭头的Jssor Slider并在内部显示2个片段
Unable to create a Jssor Slider with arrows and display 2 pieces inside
我试图获得一个带有箭头的图像库（尽管不仅有图像，让我们称之为元素），让它们移动并显示两个元素。我也希望他们自己移动。有了这段代码，我得到了一个元素库，箭头在那里工作，元素自己移动，但我一次只能看到一个。也许它不受支持，但我想知道这是否可以做到。
提前感谢！
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');
}
});
结果：
https://i.stack.imgur.com/cVXH9.png
我想你需要一个大小为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",
正确的解决方案
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>
相关文章：
- 正在$rootScope上达到控制器作用域$在内部控制器上
- 在内部映射值时渲染方法中断
- 函数参数在内部不可见，返回新的Promise(函数(resolve，reject）.传递给被promise化的函数的
- 如何在内部脚本完全加载后运行脚本
- 在内部JavaScript函数中包含外部对象
- JS Promises如何在内部工作
- V8中如何在内部表示对象
- JavaScript 在内部函数中保留一个 var
- 无法创建带有箭头的Jssor Slider并在内部显示2个片段
- 如果在内部单击下拉菜单，则不应将其关闭
- jQuery Slider在jQuery弹出窗口中只初始化一次
- jQuery Slider在我的网站上不起作用，但在JSFIDDLE中起作用
- 为什么可以在内部函数成员中访问对象引用，而不能在内部属性成员中访问
- CSS和Javascript可以在内部服务器上工作，但不能在外部工作
- 这是Javascript中的OOP吗?如何在内部初始化它
- JavaScript如何在内部迭代对象键
- 如何使用JavaScript确定用户是在内部网络还是外部网络中
- JavaScriptEs6在内部函数中引用了这一点
- javascript:“;这个“;在内部功能中
- AngularJs:在内部调用$http或$resource时，让方法同步返回
