未显示 Jssor 项目符号导航器
Jssor bullet navigator not appearing
所以我正在尝试使用 Jssor 插件让这个全宽滑块与箭头导航器、项目符号导航器和标题一起使用。我选择不复制/粘贴示例代码,只是尝试自己使用插件,只有从示例中获得的一点帮助。滑块工作正常,但是当我尝试添加项目符号导航器时,它不会出现。
.HTML:
<div id="slider1_container">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1903px; height: 550px;">
<div><img u="image" style="width: 100%" src="img/schaedel_2.jpg" /></div>
<div><img u="image" style="width: 100%" src="img/motiv1.jpg" /></div>
</div>
</div>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb13" style="position: absolute; bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 21px; HEIGHT: 21px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
.CSS:
#slider1_container {
position: relative;
top: 95px;
width: 1903px;
left: 0px;
height: 550px;
}
.jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
background: url(../img/b13.png) no-repeat;
overflow:hidden;
cursor: pointer;
}
.jssorb13 div {
background-position: -5px -5px;
}
.jssorb13 div:hover, .jssorb13 .av:hover {
background-position: -35px -5px;
}
.jssorb13 .av {
background-position: -65px -5px;
}
.jssorb13 .dn, .jssorb13 .dn:hover {
background-position: -95px -5px;
}
JQuery/JS(仍然包含针对页面其他元素的代码):
$(document).ready(function () {
var options = {
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 10, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
$("ul").animate({marginRight: '10%'}, 100);
$("#logo").delay(600).hide().fadeIn(600);
$(".menu img").delay(200).hide().fadeIn(600);
});
请将项目符号导航器放在"slider1_container"内,
<div id="slider1_container">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1903px; height: 550px;">
<div><img u="image" style="width: 100%" src="img/schaedel_2.jpg" /></div>
<div><img u="image" style="width: 100%" src="img/motiv1.jpg" /></div>
</div>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb13" style="position: absolute; bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 21px; HEIGHT: 21px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
</div>
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- 在.csv文件中写入学位符号
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- 使用相同的数据集绘制各种符号
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- 设置单击项目符号导航后不起作用的间隔
- 未显示 Jssor 项目符号导航器
- 项目符号导航中的 JSSOR 滑块错误
- Ajax 页面导航“#”符号
- JSSOR的项目符号导航问题
- 在幻灯片中放置项目符号导航栏
- 在Swipe JS中使用项目符号作为导航