Search code examples
javascripthtmlcssjssor

Jssor Slider Bullet display at the top when using linked css

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
}

enter image description here

Solution

  • 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 {