Javascript 卡鲁弗雷泽尔：显示部分项目？

我正在使用创建一个垂直旋转木马。一切都很好，除了我更喜欢部分项目显示在底部，裁剪，而不是隐藏。这样，它将向用户指示可以滚动的其他项目

我一直在读这本书，但到目前为止还不知道我所追求的是否可能

。查看页面上最底部的项目

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

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

---

这是一个有点黑客，但它的工作。将滚动条的高度（在本例中为

ul

）设置为150%，将父元素（在本例中为

body

）设置为

溢出：隐藏。现在最底部的元素已脱离屏幕

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

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

CSS

body {
    overflow: hidden;
    }

垂直旋转木马中的下一个不可见元素被边距向下推。
我当前正在通过以下函数覆盖它：

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

它的缺点是，您必须在carouselinit和up和down事件上调用此函数。但它是有效的；）
 哈，卡鲁弗雷泽尔支持它，不需要黑客：）！您可以通过以下选项实现此目标：

items: {
    visible: '+1'
}

编辑：但这有一个问题。如果整个可见项目数+1==所有项目数，则即使一个图像仅部分可见，也无法滚动旋转木马。您可以通过设置来克服此问题，例如
最小值：1
，但这并不总是一个好办法（例如，如果图像数量是动态的，并且您不希望在只有一个或两个图像时显示滚动处理程序）
 这似乎违背了这种旋转木马的全部目的。其他插件要求所有幻灯片大小相同；然后可以更改视口大小以获得下一张幻灯片的局部视图。对于你的，它似乎是动态的（“智能”）足以故意避免这种情况。我看不到任何可配置的选项，允许你做你想做的事。如果希望选项部分显示下一张幻灯片，请尝试jCarousel或jCarousel Lite。注意，前者有一个循环错误。这是一个很好的观点。在某些情况下，这是可取的。在这种情况下，我认为这是不可取的。我会使用另一个插件，但这个插件可以很好地处理很多其他插件无法处理的事情。我正在再次查看选项。。。我认为这个插件不可能。如果所有的幻灯片都是不同尺寸的，这肯定会非常困难。。。这意味着视口大小必须不断更改。Fred动态更改视口，但其他插件不会。我想你最好的办法是使所有幻灯片大小相同，因为你的目标在这个起点上更容易实现。@Sparky:有可能：）。看看我的答案。@clime，插件现在有了这个选项就太好了。我不知道18个月前我看到的版本是否也是如此。聪明。但是对于不同大小的幻灯片，你不会得到不一致的结果吗？高度变化不大，如果需要，我可以随时将
ul
的高度增加到200%。嗯，像这样，旋转木马可能不会初始化，因为它会认为有足够的空间放置图像，而实际上没有。。至少我的情况是这样的。您可以使用最小选项“修复”它。但如果你只有几张照片，那也不理想。我仍然在寻找如何解决这个问题。我相当肯定，当这个问题在2012年初发布时，这个选项是不可用的。