javascript - 寻找响应式 js 轮播

Question

我试图找到一个旋转木马，如：http ://whiteshoe.ferragamo.com但更简单。我所需要的只是一个响应式整页轮播，其中包含在“活动”模式下具有描述和链接的项目，而其他项目只是标题，并且由于它们处于非活动状态，它们看起来更暗或呈灰色。

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

Answer 1

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

Answer 2

这个不错。非常简洁、漂亮的代码，并且响应迅速且跨浏览器友好。

http://unslider.com/

Answer 3

好的，所以...

我发现 js 只是添加了 iline css 属性，所以我添加了一些 css 以使其具有响应性（没有调整我的图像大小，现在可以满足我的需要）。CaroFredSel 为您编写的代码添加了一些类，因此我只需要添加 width: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”上添加更多突出显示的内容和文本，但我认为这涵盖了所有内容。谢谢，希望这对某人有所帮助。