carousel - caroufredselクールなカルーセル51と4つの画像

Question

このスクリプトを使いたい

しかし、4つの画像で：

方法がわかりませんfredcarouselでどのオプションを使用すればよいですか？

ありがとう

Answer 1

この carouFredsel の例で何が起こっているかの内訳は次のとおりです。

作成者は、変数を使用してスライドショー内の各要素の位置を指定します。

var _center = {
    width: 600,
    height: 400,
    marginLeft: 0,
    marginTop: 0,
    marginRight: 0
};
var _left = {
    width: 300,
    height: 200,
    marginLeft: 0,
    marginTop: 150,
    marginRight: -150
};
var _right = {
    width: 300,
    height: 200,
    marginLeft: -150,
    marginTop: 150,
    marginRight: 0
};
var _outLeft = {
    width: 150,
    height: 100,
    marginLeft: 150,
    marginTop: 200,
    marginRight: -200
};
var _outRight = {
    width: 150,
    height: 100,
    marginLeft: -200,
    marginTop: 200,
    marginRight: 50
};

次に、carouFredSel イニシエーターを使用して、スクロール動作をカスタマイズします。

$('#carousel').carouFredSel({
    width: 900,
    height: 400,
    align: false,
    items: {
        visible: 3,
        width: 100
    },
    scroll: {
        items: 1,
        duration: 400,
        onBefore: function( data ) {
            data.items.old.eq( 0 ).animate(_outLeft);
            data.items.visible.eq( 0 ).animate(_left);
            data.items.visible.eq( 1 ).animate(_center);
            data.items.visible.eq( 2 ).animate(_right).css({ zIndex: 1 });
            data.items.visible.eq( 2 ).next().css(_outRight).css({ zIndex: 0 });

            setTimeout(function() {
                data.items.old.eq( 0 ).css({ zIndex: 1 });
                data.items.visible.eq( 0 ).css({ zIndex: 2 });
                data.items.visible.eq( 1 ).css({ zIndex: 3 });
                data.items.visible.eq( 2 ).css({ zIndex: 2 });
            }, 200);
        }
    }
});

onBefore イベントは、スライドショーに関する現在の情報を含むさまざまなパラメーターを受け取ります。この場合、最初のパラメーターはoldItemsであり、以前に設定された「位置」( var _center、var _leftなど) を使用して、スクリプトは対応する項目をアニメーション化します。これらの行は、アニメーションの後、スライドショー内の要素の css と z-index を設定します。これにより、スライドショーで css プロパティに基づいてより効率的な方法で要素を選択できます。

$('#carousel').children().eq( 0 ).css(_left).css({ zIndex: 2 });
$('#carousel').children().eq( 1 ).css(_center).css({ zIndex: 3 });
$('#carousel').children().eq( 2 ).css(_right).css({ zIndex: 2 });
$('#carousel').children().eq( 3 ).css(_outRight).css({ zIndex: 1 });

これを 4 つの要素に適応させるには、5 番目の変数を配置と次のような名前で追加し、_farRight各ステップでスクリプトにプラグインする必要があります。