Question

我正在使用carouFredSel创建一个垂直轮播。一切都很好，除了我希望部分项目显示在底部，裁剪，而不是隐藏。这样就可以向用户表明还有其他可以滚动的项目。

我一直在阅读documentation，但到目前为止还无法判断我所追求的是否可能。

Check out the JSFiddle to see what I mean。观看页面上最底部的项目。

的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"
    }
});

Answer 1

这有点像黑客，但它确实有效。将滚动条的高度（在本例中为ul）设置为150％，将父元素（在本例中为body）设置为overflow: hidden。现在最底层的元素是屏幕外的。

<强>的Javascript

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

<强> CSS

body {
    overflow: hidden;
    }

Answer 2

哈，caroufredsel支持它，不需要黑客:)）！您可以使用以下选项实现它：

items: {
    visible: '+1'
}

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

Answer 3

垂直传送带中的下一个不可见元素被边距向下推。我目前正在通过以下功能覆盖它：

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事件上调用这个函数。但它有效;）

carouFredSel：显示部分商品？

3 个答案: