Jssor Slider Bullet display at the top when using linked css

Question

I am trying to use Jssor Slider , I copy a demo and it works fine.

While after I try to move the inline css into a separate css file, the bullet navigator displays at the top of the slider instead of at the bottom.

This is my original html with inline 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>

After I move the style to a css file :

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 slider will duplicate 'outer container' and 'slides' container while initialize. And it will remove id attribute from duplication.

Duplicate 'outer container' is to scale the slider. Duplicate 'slides' container is for slideshow purpose.

I see.

Please replace

<div id="slider_container"

with

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

And replace

div#slider_container {

with

div.slider_container {