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 回答