5

carouFredSelを使用して垂直カルーセルを作成しています。部分的なアイテムを非表示にするのではなく、トリミングして下部に表示する方がよい場合を除いて、すべてがうまく機能します。このようにして、スクロールできる追加のアイテムがあることをユーザーに示します。

私はドキュメントを読んでいますが、これまでのところ、私が何を求めているのかがわかりません。

JSFiddleをチェックして、私が何を意味するかを確認してください。ページの一番下の項目を見てください。

Javascript

$("ul").carouFredSel({
    direction: "up",
    align: "top",
    width: 100,
    height: "100%",
    items: {
        visible: "variable",
        width: 100,
        height: "variable"
    },
    scroll: {
        items: 1,
        mousewheel: true,
        easing: "swing",
        duration: 500
    },
    auto: false,
    prev: {
        button: ".prev",
        key: "up"
    },
    next: {
        button: ".next",
        key: "down"
    }
});​
4

3 に答える 3

4

これはちょっとしたハックですが、機能します。スクローラーの高さ（この場合はul）を150％に設定し、親要素（この場合はbody）をに設定しoverflow: hiddenます。これで、一番下の要素が画面外に表示されます。

Javascript

$("ul").carouFredSel({
    height: "150%"
});

CSS

body {
    overflow: hidden;
    }
于 2012-03-02T16:57:07.537 に答える
1

ハ、caroufredselはそれをサポートしています、ハックは必要ありません:)）！次のオプションでそれを達成できます：

items: {
    visible: '+1'
}

編集：しかし、これには問題があります。表示されているアイテム全体の数+1==すべてのアイテムの数の場合、1つの画像が部分的にしか表示されていなくても、カルーセルをスクロールすることはできません。この問題は、たとえば設定することで解決できますがminimum: 1、常に実行できるとは限りません（たとえば、画像の数が動的で、画像が1つか2つしかないときにスクロールハンドラーを表示したくない場合）。

于 2013-10-12T23:14:23.633 に答える
0

垂直カルーセルの次の非表示要素は、マージンによって押し下げられます。現在、次の関数でオーバーライドしています。

function cropCarousel () {
    var visibleElements = this.triggerHandler("currentVisible"), // show all visible
    $lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one

    $lastElement.css('margin-bottom', '30px'); // amend the margin
};

cropCarousel.call($('#your_carousel_id'));

その欠点は、カルーセルの初期化およびアップイベントとダウンイベントでこの関数を呼び出す必要があることです。しかし、それは機能します;）

于 2013-05-20T10:19:44.807 に答える