Question

所以我试图使用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);
});

Answer 1

请将子弹导航器放在'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>

Jssor子弹导航仪没有出现

1 个答案: