0

私は素晴らしいliスライダーhttp://unslider.com/を見つけましたが、私のプロジェクトには多くの問題があります。

このスライダーをフルスクリーン ページの背景として設定しようとしましたが、li 要素がウィンドウの 100% の高さではありません (コンテナーです)。

<body>
    <!--- Always on top --->
    <section class="content">
        <nav>
            <ul>
                <li id="fotograf_pg1_btn">1btn</li>
                <li id="fotograf_pg2_btn">2btn</li>
                <li id="fotograf_pg3_btn">3btn</li>
            </ul>
        </nav>
    </section>

            <!---------------------->

            <!-----as a background ---------->
<div class="unslider">
    <ul>
        <!--------------  Slide fotograf ślubny ------------->
        <li id="fotograf_pg1"> Fotograf zakładka 1</li>
        <!--------------  Slide Fotograf prouktowy ------------->
        <li id="fotograf_pg2"> Fotograf zakładka 2</li>
        <!--------------  Slide Fotograf prouktowy ------------->
        <li id="fotograf_pg3"> Fotograf zakładka 3</li>
    </ul>
</div>
</body>

メソッドを混ぜましたが、まだ何もありません。jQueryで解決するが、できれば純粋なCSSを使いたい

    .unslider { position: relative; overflow: hidden; 
    height: auto !important; /
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
    width:100%;
    background-color: red; /* just for presentational purposes */
    position: absolute; overflow:hidden;
    top:0px;
    z-index:-1;

}


.unslider li { 
    list-style:none;
    display: inline-block;
    height: 100%;
    width:100%;
    }

.unslider ul li { 
    float: left;
    display: inline-block
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
    width:100%;
}

.unslider ul{ 
    display:block;
    height: 100%;
    width:100%;
}
4

1 に答える 1