文章/答案/技术大牛

发布

社区首页 >问答首页 >carouFredSel:显示部分项目？

问carouFredSel:显示部分项目？
EN

Stack Overflow用户

提问于 2012-03-02 16:31:37

回答 3查看 8.2K关注 0票数 5

我正在使用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"
    }
});

javascript

jquery

html

css

caroufredsel

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-03-02 16:57:07

这是个小问题，但很有效。将滚动体(在本例中为ul)的高度设置为150%，将父元素(在本例中为body)设置为overflow: hidden。现在最下面的元素是脱离屏幕的。

Javascript

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

CSS

body {
    overflow: hidden;
    }

票数 4

Stack Overflow用户

发布于 2013-10-12 23:14:23

哈，旋转木马支持它，不需要黑客：)！您可以通过以下选项来实现这一目标：

items: {
    visible: '+1'
}

编辑:不过，这有一个问题。如果整个可见项的数量+所有项目的1 ==数，那么即使一个图像仅部分可见，旋转木马也不能被滚动。您可以通过设置例如minimum: 1来克服这个问题，但这并不总是一种方法(例如，如果图像的数量是动态的，并且您不希望滚动处理程序在只有一两个图像时出现)。

票数 1

Stack Overflow用户

发布于 2013-05-20 10:19:44

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

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

它的缺点，您将不得不调用这个函数在旋转木马，在上和下事件。但它起作用;)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9536844

复制

相似问题

问carouFredSel:显示部分项目？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问carouFredSel:显示部分项目？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问carouFredSel:显示部分项目？
EN