使用链接时 Jssor Slider Bullet 显示在顶部 css

Question

我正在尝试使用 Jssor Slider，我复制了一个演示，它运行良好。

当我尝试将内联 css 移动到单独的 css 文件后，项目符号导航器显示在滑块的顶部而不是底部。

这是我的原创 html 内联 css:

        <div id="slider_container" style="top: 0px; left: 0px; width: 1179px; height: 582px;">
            <!-- Slides Container -->
            <div u="slides">
                <div><img u="image" src="image/home-banner/logo.jpg"/></div>
                <div><img u="image" src="image/home-banner/getup.jpg"/></div>
                <div><img u="image" src="image/home-banner/onroad.jpg"/></div>
                <div><img u="image" src="image/home-banner/atbed.jpg"/></div>
            </div>

            <!--arrow navigator-->
            <span u="arrowleft" class="slider-arrowl" style="width: 50px; height: 50px;left: 8px"></span>
            <span u="arrowright" class="slider-arrowr" style="width: 50px; height: 50px;right: 8px"></span>

            <!-- bullet navigator container -->
            <div u="navigator" class="slider-bullet" style="position: absolute; bottom: 16px; right: 6px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
            </div>

        </div>

将样式移动到 css 文件后：

div#slider_container{
    position: relative;
    margin: auto;
    margin-top: 40px;
    padding: 10px;
    top: 0px; left: 0px; width: 1179px; height: 582px; display: block
}

Answer 1

Jssor 滑块将在初始化时复制 'outer container' 和 'slides' 容器。并且它将从重复中删除 id 属性。

重复'outer container'是缩放滑块。重复 'slides' 容器用于幻灯片放映。

明白了。

请替换

<div id="slider_container"

和

<div id="slider_container" class="slider_container"

并替换

div#slider_container {

和

div.slider_container {

使用链接时 Jssor Slider Bullet 显示在顶部 css

Jssor Slider Bullet display at the top when using linked css

html

javascript

css

jssor