响应式卷帘画廊

Question

我正在为手机上的swipe画廊制作一个片段。你可以在这里看到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开发工具>模拟触摸事件

写了一个简化版的http://codepen.io/piatra/pen/usaHo，对这个版本的任何改进都是非常欢迎的:)

一个很好的例子是http://csscience.com/responsiveslidercss3/，但是当添加一个新面板时，你必须编辑CSS

Answer 1

我认为这不能用纯css来完成，特别是你想要它易于维护，而不需要在添加更多窗格时改变css。

一种解决方案是使用jquery对窗格进行计数，然后相应地设置包装宽度和窗格宽度，以达到预期的效果：

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%，依此类推。