Question

我正在尝试将当前中间项放在100％宽度中间的旋转木马中。这是一个示例图像http://ww.prompt-dev.com/example.png，发现用简单的单词很难解释......

轮播宽度为100％。可见项目为3。物品宽度是可变的。一次滚动1个项目。

这是我到目前为止使用的Caroufredsel设置：

$('#carousel').carouFredSel({
    width: "100%",
    items: { visible: 3, minimum: 2, start: -1, width: 'variable' },
    scroll: { items: 1, pauseOnHover: true, duration: 1000, timeoutDuration: 3000
        ,onBefore: function(){
            $('ul#carousel li')
                .animate({opacity:0.5}, 250);
        },
        onAfter: function(){
            $('ul#carousel li')
                .filter(':eq(1)')
                .animate({opacity:1}, 250);
        }
    },
    auto: { play: false },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
});

这就是CSS：

#carousel_wrap {
    height: 700px;
    left: 0;
    margin: 30px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

ul#carousel li {
    display: block;
    float: left;
    height: 700px;
    margin: 0 7.5px;
    position: relative;
}

非常感谢任何帮助！

Answer 1

这是我能做的最好的。

1 - 添加了对齐中心，并对js

做出了响应

$('#carousel').carouFredSel({
    width: "100%",
    align: 'center',
    responsive  : true,
    items: { visible: 3, minimum: 2, start: -1},
    scroll: { items: 1, pauseOnHover: true, duration: 1000, timeoutDuration: 3000
        ,onBefore: function(){
            $('ul#carousel li')
                .animate({opacity:0.5}, 250);
        },
        onAfter: function(){
            $('ul#carousel li')
                .filter(':eq(1)')
                .animate({opacity:1}, 250);
        }
    },
    auto: { play: true },
    prev: { button: "#prev", key: "left" },
    next: { button: "#next", key: "right" },
    swipe: true
});

2 - 在css的第150行和第151行添加 - 文本对齐中心和溢出隐藏

ul#carousel li {
    display: block;
    float: left;
    height: 700px;
    margin: 0 7.5px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

以下是演示链接：http://jsfiddle.net/ignaciocorreia/sBT9M/

Caroufredsel＆gt;转盘容器宽度为100％时将当前项目居中至一定边距

1 个答案: