2013-08-07 77 views
-2

我想找到像以下這樣的旋轉木馬:http://whiteshoe.ferragamo.com但更簡單。 我需要的是一個響應式全頁傳送帶,其中的項目在「主動」模式下有一個描述和鏈接,其他只是標題,因爲它們不活動,它們看起來較暗或灰暗。尋找響應式js旋轉木馬

我試過這一個http://caroufredsel.dev7studios.com但不知道如何添加不活動/活動狀態,而響應:true不會重新調整我的圖像的大小。 謝謝:)

+1

_「我正在嘗試構建一個旋轉木馬」_ - 您是在嘗試構建一個旋轉木馬嗎?或者您是否要求爲現有的圖書館提供建議? – nnnnnn

+0

我實際上不是程序員(我更像是一個css怪胎),所以... ...像一個圖書館,可以使它更容易...我可以做一些修改,但沒有那麼多,嘿。 :3謝謝! –

+0

好的,編輯我的問題,因爲我發佈時沒有注意到它的愚蠢。現在很明顯,我正在尋找一個旋轉木馬庫。 –

回答

0

好了,所以......

我發現,JS只是增加ILINE CSS屬性,所以我加了一些CSS,使其響應(不調整我的圖片,它現在適合我的需要)。 CaroFredSel爲您編寫的代碼添加了一些類,所以我需要添加的是寬度:100%!重要屬性以使其工作。

對於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'中添加更多突出顯示的內容和文本,但我認爲這涵蓋了所有內容。 感謝並希望這有助於某人。

0

這很有趣,但似乎這個響應caroussel的響應不起作用在我的瀏覽器(在演示頁面)...無論如何,有很多響應式jquery caroussel,你會找到一個谷歌...

+0

是啊..但我開始注意到,響應是JS,但它只是覆蓋CSS,所以我正在調整和完成我的目標的一部分...仍然想添加變化的狀態你.. –

+1

所以,祝你好運caroufredsel。如果有點難,請發佈你的代碼,我們可以幫忙。如果真的很難,請考慮使用另一個旋轉木馬... – Pierre