響應式滑動畫廊

我正在研究移動設備的滑動畫廊的片段。你可以在這裏看到它http://codepen.io/piatra/full/Edtlq 響應式滑動畫廊

[].forEach.call(slides, function(s){ 
    s.style.width = mainContainer.offsetWidth + 'px'; 
});

我的問題：因爲內容是由他們需要在同一行向右多個面板。面板的大小應該是屏幕的100％，因此您一次只能看到一個面板。但是我不能將css的面板大小設置爲100％，因爲這會將每個面板都推到自己的行上。

目前我正在解決這個在JS，ontouchstart我得到的主要父母的大小，並設置每個幻燈片的寬度，但我不喜歡這個解決方案，因爲當切換橫向肖像，你必須觸摸畫廊它要更新，即使我將事件列表添加到更改中，它仍然不是一個漂亮的解決方案。

我只能在CSS中達到這種效果嗎？基於父級的寬度變量的同一行上的面板庫？

PS：Chrome瀏覽器開發工具>效法觸摸事件

PPS：加時寫下了一個簡化版本http://codepen.io/piatra/pen/usaHo 任何改進，這個版本是非常歡迎:)

一個很好的例子是http://csscience.com/responsiveslidercss3/但一個新的面板，你必須編輯CSS

來源

2012-12-21 andrei

即時消息根本無法在瀏覽器上瀏覽。爲什麼不使用媒體查詢？ – user1721135

@ user1721135他們不容易維護，我希望有一個更靈活的解決方案 – andrei

300％包裝33％窗格怎麼樣？像這個http://jsbin.com/idufaj/2/edit – user1721135

我認爲這不能用純CSS來完成，特別是因爲你希望它可以輕鬆維護而無需在添加更多窗格時更改CSS。

一個解決辦法是使用jQuery來算窗格，然後設置wrappe寬度和窗格寬度相應地達到預期的效果：

http://jsbin.com/idufaj/6/edit

只要你喜歡你可以添加儘可能多的窗格，並且效果將始終存在。

$(document).ready(function() { 

var panes = $(".pane").length; 
var width = panes * 100 + "%"; 
var panewidth = 100/panes + "%"; 
$("body").css({ width : width }); 
    $(".pane").css({width: panewidth }); 
});

在這個例子中我使用body作爲包裝，但它可以是任何元素。在這種情況下，由於有3個窗格，所以主體寬度設置爲300％，窗格寬度設置爲33.3％。如果添加另一個窗格，則主體寬度將爲400％，並且窗格寬度將爲25％等等。

來源

2012-12-29 09:53:16 user1721135

響應式滑動畫廊

回答

相關問題