Jssor箭头导航自动中心到ceileing

时间:2016-02-06 20:19:53

标签: jquery html css jssor

我有JSSOR滑块的问题。如图所示箭头被绑定到div的顶部而不是它的中间。我想这是一个测量问题,尽管宽度保持恰到好处。所有粘贴的内容仅包含在Bootstrap容器中。

enter image description here

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);
});

有什么想法吗?

0 个答案:

没有答案