2

我正在尝试将当前中间项目放置在 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;
}

任何帮助将不胜感激！

4

1 回答 1

4

这是我能做到的最好的。

1 - 为 js 添加了对齐中心和响应 true

$('#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/

于 2013-08-08T20:28:25.790 回答