1

nivo スライダーで写真の左側に異なるテキストを表示し、写真のようにスライドさせたいです。さまざまな解決策を試しましたが、テキストを画像の外に移動できませんでした。左に負の値を追加すると、キャプションが消えてしまうためです。画像だけでわかります。質問は、画像の外側にキャプションの位置を設定する方法です-それは画像の一部ではありませんか? どうすればこれを達成できますか？たぶん、nivo スライダーはこれに適した方法ではないでしょうか?

                          -----------------------------------------
                          |                                       |
                          |              image                    |
 -------------            |                                       |
 |  caption   |           |                                       |
 --------------           -----------------------------------------

答えてくれてありがとう。私はこれまでにこれを持っています: HTML 

    <div id="feature-text-01" class="nivo-html-caption">
        <p><h2>Title 1</h2></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
    <div id="feature-text-02" class="nivo-html-caption">
        <p><h2>Title 2</h2></p>
        <p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
    </div>
    <div id="feature-text-03" class="nivo-html-caption">
        <p><h2>Title 3</h2></p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
    <div id="feature-text-04" class="nivo-html-caption">
        <p><h2>Title 4</h2></p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>

CSS

    .nivo-caption { 
        width: 200px; 
        height: 250px; 
        left: -200px; /* same as the width */
    }
4

5 に答える 5

2

これが私の解決策です：

スライダーに追加のパラメーターを 1 つ呼び出します

$('#Myslide').nivoSlider({
    manualCaption: true // Manual caption placement
});

ページのスライド キャプションを表示する場所に HTML コードを挿入します。

<div id="manual-nivo-caption" class="nivo-caption"></div>

キャプションに CSS を追加する

#manual-nivo-caption{
    background: none;
    color: #000;
    position: relative;
    border: 1px solid #000;
}

この後、 jquery.nivo.slider.pack.jsにいくつかの変更を加える必要があります。

最初のステップ: スライダーのデフォルト パラメータに新しいパラメータを追加します。

e.fn.nivoSlider.defaults={ ... , manualCaption:false, ... }

2 番目のステップ: キャプションを追加する前に、パラメーターを確認してください

交換

s.append(e('<div class="nivo-caption"></div>'));

と

if(!r.manualCaption){s.append(e('<div class="nivo-caption"></div>'));}

3 番目のステップ: キャプション検索を親関連からグローバルに変更します (ページで複数のスライダーを使用する可能性は失われますが、簡単なコード変更でこの問題は解消されます。私にとっては重要ではありませんでした。)

交換

var n=e(".nivo-caption",s);

と

var n=e(".nivo-caption");

それはすべての人々です。お役に立てば幸いです。

于 2013-12-16T06:01:45.927 に答える
0 
please find this css

.futurico-theme .nivo-caption
{
}

and remove 

margin-left:-50px
于 2013-09-25T18:48:08.360 に答える