Question

我正在尝试找到像http://whiteshoe.ferragamo.com这样的旋转木马，但更简单。我需要的是一个响应式整页旋转木马，其中的项目具有“活动”模式的描述和链接，其他只是标题，因为它们不活动，它们看起来更暗或灰色。

我已尝试过这个http://caroufredsel.dev7studios.com，但不知道如何添加非活动/活动状态，而且响应：true不会重新调整我的图像大小。谢谢:)）

Answer 1

这很有趣，但似乎这个响应式caroussel的响应在我的浏览器中不起作用（在演示页面上）...无论如何，有很多响应式jquery caroussel，你会在google上找到一个。 ..

Answer 2

这是一个很好的。非常简单，漂亮的代码，它的响应和跨浏览器友好。

http://unslider.com/

Answer 3

好的......

我发现js刚刚添加了iline css属性，所以我添加了一些css以使其响应（没有调整我的图像，现在可以根据我的需要工作）。 CaroFredSel为你编写的代码添加了一些类，所以我需要添加的是宽度：100％！important属性以使其工作。

对于js部分，我必须在当前添加一个突出显示，所以我添加了这个代码并且它可以工作：

function highlight( items ) {
    items.filter(":eq(1)").css({
        opacity : 1
    });
    return items;
}
function unhighlight( items ) {
    items.css({
        opacity : .3
    });
    return items;
}

然后，在大小和一般事物的默认属性之后：

scroll: {
items:1,
onBefore: function( data ) {
        unhighlight( data.items.old );
    },
    onAfter : function( data ) {
        highlight( data.items.visible );
    },
},

auto: false,
prev: {
    button: "#prev",
    key: "left",
    onBefore: function( data ) {
            unhighlight( data.items.old );
        },
        onAfter : function( data ) {
            highlight( data.items.visible );
        }
},
next: {
    button: "#next",
    key: "right",
    onBefore: function( data ) {
            unhighlight( data.items.old );
        },
        onAfter : function( data ) {
            highlight( data.items.visible );
        }
},

最后：

highlight( unhighlight( $j("#f-carousel > *") ) );

}）;

我会在'onafter'上添加更多突出显示内容和文本，但我认为这涵盖了所有内容。谢谢，希望这有助于某人。

寻找响应js旋转木马

3 个答案: