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 支持它，不需要 hack :))！您可以使用以下选项来实现它：

items: {
    visible: '+1'
}

编辑：虽然这有问题。如果整个可见项目的数量 + 1 == 所有项目的数量，则即使一个图像仅部分可见，轮播也无法滚动。您可以通过设置 eg 来克服这个问题，minimum: 1但这并不总是可行的方法（例如，如果图像的数量是动态的，并且您不希望在只有一个或两个图像时出现滚动处理程序。）。

于 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'));

它的缺点是您必须在 carousel init 和 up 和 down 事件上调用此函数。但它有效；）

于 2013-05-20T10:19:44.807 回答