2

現在の中間アイテムをカルーセルの 100% 幅の真ん中に配置しようとしています。画像の例を次に示しますhttp://ww.prompt-dev.com/example.png、平易な言葉で説明するのは難しいと思います...

カルーセルの幅は 100% です。表示される項目は 3 です。項目の幅は可変です。一度に 1 項目ずつスクロールします。

私がこれまでに使用している Caroufredsel のセットアップは次のとおりです。

$('#carousel').carouFredSel({
    width: "100%",
    items: { visible: 3, minimum: 2, start: -1, width: 'variable' },
    scroll: { items: 1, pauseOnHover: true, duration: 1000, timeoutDuration: 3000
        ,onBefore: function(){
            $('ul#carousel li')
                .animate({opacity:0.5}, 250);
        },
        onAfter: function(){
            $('ul#carousel li')
                .filter(':eq(1)')
                .animate({opacity:1}, 250);
        }
    },
    auto: { play: false },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
});

そして、これはCSSです：

#carousel_wrap {
    height: 700px;
    left: 0;
    margin: 30px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

ul#carousel li {
    display: block;
    float: left;
    height: 700px;
    margin: 0 7.5px;
    position: relative;
}

どんな助けでも大歓迎です！

4

1 に答える 1

4

これが精一杯です。

1 - 中央揃えと js に忠実なレスポンシブを追加

$('#carousel').carouFredSel({
    width: "100%",
    align: 'center',
    responsive  : true,
    items: { visible: 3, minimum: 2, start: -1},
    scroll: { items: 1, pauseOnHover: true, duration: 1000, timeoutDuration: 3000
        ,onBefore: function(){
            $('ul#carousel li')
                .animate({opacity:0.5}, 250);
        },
        onAfter: function(){
            $('ul#carousel li')
                .filter(':eq(1)')
                .animate({opacity:1}, 250);
        }
    },
    auto: { play: true },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
});

2 - css の 150 行目と 151 行目に追加 - テキストを中央に揃え、オーバーフローを非表示

ul#carousel li {
    display: block;
    float: left;
    height: 700px;
    margin: 0 7.5px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

デモのリンクは次のとおりです: http://jsfiddle.net/ignaciocorreia/sBT9M/

于 2013-08-08T20:28:25.790 に答える