1

リーン スライダーを使用しています: http://dev7studios.com/lean-slider/

各スライドを別の URL にリンクしたい。最後のスライドのコードだけが実行される (そして他のすべてのスライドにも適用される) ことに気付きました。たとえば、最後のスライドだけに google のタグを追加すると、すべてのスライドが google にリンクされます。どういうわけか、最後のスライドしか見えません。スライドの要素を調べると、最後のスライドのコードが常に強調表示されていることがわかります。

編集: sample-style.css ファイルを含めなくても問題なく動作することにも気付きました。しかし、これがないと、フェード/トランジション効果がなく、ナビゲーション ボタンがフォーマットされていないため、このファイルがないと意味がありませんが、おそらくスライダーの動作に問題があります。

これを引き起こしている原因や修正方法についてのアイデアはありますか?

唯一の変更点は、各スライドへのリンクを追加したことです。(index.html)

...
        <div id="slider">
            <div class="slide">
                <a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
            </div>
            <div class="slide2">
                <a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
            </div>
            <div class="slide3">
                <a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
            </div>
            <div class="slide4">
                <a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
            </div>
        </div>
...
4

3 に答える 3

3

私はちょうどそれを理解しました。z-index次の 3 つの場所でプロパティを編集する必要があります。

.lean-slider-slide.current {
    z-index: 1;
}

#slider-direction-nav {
    z-index: 2;
}

#slider-control-nav {
    z-index: 2;
}

slider.cssこれは、sample-style.cssLean Slider をダウンロードしたときに見つけることができます。

于 2014-07-16T19:56:27.060 に答える
0

常に最後のリンクを使用してください。css で遊んで、要素の位置を強制し、各画像のリンクを有効にすることができます。

/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
 z-index:3;
}

.lean-slider-slide.current
{
 z-index:2;
}

.lean-slider-slide.current a
{
 float:left;
}
于 2015-07-09T22:59:39.683 に答える