-2

http://whiteshoe.ferragamo.comのようなカルーセルを見つけようとしていますが、より簡単です。私が必要とするのは、「アクティブ」モードの説明とリンクを持つアイテムを含む応答性の高いフルページカルーセルだけです。他のアイテムはタイトルだけで、非アクティブであるため、暗くまたは灰色がかっています。

私はこれを試してみましたhttp://caroufredsel.dev7studios.comが、非アクティブ/アクティブ状態を追加する方法がわからず、レスポンシブ: true は画像のサイズを変更しません。ありがとう ：）

4

3 に答える 3

0

わかりました...

js が iline css プロパティを追加しただけであることがわかったので、レスポンシブにするためにいくつかの css を追加しました (画像のサイズを変更せずに、今では私のニーズに対応しています)。CaroFredSel は、作成したコードにいくつかのクラスを追加するので、追加する必要があったのは width:100% !important プロパティだけでした。

js の部分については、現在の部分にハイライトを追加する必要があったため、このコードを追加すると機能しました。

function highlight( items ) {
    items.filter(":eq(1)").css({
        opacity : 1
    });
    return items;
}
function unhighlight( items ) {
    items.css({
        opacity : .3
    });
    return items;
}

そして、サイズと一般的なもののデフォルトのプロパティの後：

scroll: {
items:1,
onBefore: function( data ) {
        unhighlight( data.items.old );
    },
    onAfter : function( data ) {
        highlight( data.items.visible );
    },
},

auto: false,
prev: {
    button: "#prev",
    key: "left",
    onBefore: function( data ) {
            unhighlight( data.items.old );
        },
        onAfter : function( data ) {
            highlight( data.items.visible );
        }
},
next: {
    button: "#next",
    key: "right",
    onBefore: function( data ) {
            unhighlight( data.items.old );
        },
        onAfter : function( data ) {
            highlight( data.items.visible );
        }
},

そして最後に：

highlight( unhighlight( $j("#f-carousel > *") ) );

});

「onafter」にハイライトとテキストを追加しますが、これですべてをカバーできると思います。ありがとう、これが誰かに役立つことを願っています。

于 2013-08-08T14:30:12.203 に答える
0

これは良いものです。非常に最小限で優れたコードであり、レスポンシブでクロスブラウザー フレンドリーです。

http://unslider.com/

于 2013-08-08T13:13:53.677 に答える