我有JSSOR滑块的问题。如图所示箭头被绑定到div的顶部而不是它的中间。我想这是一个测量问题,尽管宽度保持恰到好处。所有粘贴的内容仅包含在Bootstrap容器中。
HTML结构:
<div id="slider1_container">
<!-- Slides Container -->
<div u="slides" id="slides">
<div><img u="image" src="@routes.Assets.versioned("images/image1.jpg")" /></div>
<div><img u="image" src="@routes.Assets.versioned("images/image2.jpg")" /></div>
</div>
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:150px;left:12px;width:40px;height:58px;" ></span>
<span data-u="arrowright" class="jssora22r" style="top:150px;right:12px;width:40px;height:58px;" ></span>
</div> <!-- / slider -->
CSS:
#slider1_container {
position: relative;
margin: 0 auto;
top: 0px;
left: 0px;
width: 1300px;
height: 500px;
overflow: hidden;
visibility: hidden;
}
#slides {
cursor: default;
position: relative;
top: 0px;
left: 0px;
width: 1300px;
height: 500px;
overflow: hidden;
}
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url('../images/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div {
background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av:hover {
background-position: -37px -7px;
}
.jssorb05 .av {
background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover {
background-position: -97px -7px;
}
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('../images/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l {
background-position: -10px -31px;
}
.jssora22r {
background-position: -70px -31px;
}
.jssora22l:hover {
background-position: -130px -31px;
}
.jssora22r:hover {
background-position: -190px -31px;
}
.jssora22l.jssora22ldn {
background-position: -250px -31px;
}
.jssora22r.jssora22rdn {
background-position: -310px -31px;
}
JS:
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$AutoCenter: 2
}
};
var jssor_1_slider = new $JssorSlider$("slider1_container", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
有什么想法吗?