未显示 Jssor 项目符号导航器

Jssor bullet navigator not appearing

本文关键字:导航 符号 项目 显示 Jssor      更新时间:2023-09-26

所以我正在尝试使用 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>