响应式滑动画廊

Question

我正在为移动设备制作一个滑动图库的代码片段。

您可以在这里查看它：http://codepen.io/piatra/full/Edtlq

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

我的问题是：由于内容由多个面板组成，它们需要在同一行右侧显示。每个面板的大小应该是屏幕的100%，这样你只能看到一个面板。但是我不能在CSS中将面板大小设置为100%，因为这会使每个面板都独立成行。

目前我正在JS中解决这个问题，当触摸开始时，我获取主父元素的大小并将每个幻灯片设置为该宽度，但我不喜欢这种解决方案，因为当从横向模式切换到纵向模式时，您必须触摸图库才能更新，即使我添加了事件侦听器也仍然不是很好的解决方案。

我可以仅使用CSS实现此效果吗？一排面板的图库，宽度基于父元素的变量？

PS : Chrome开发者工具 > 模拟触摸事件

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

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

- andrei

---

我完全无法在Chrome上导航。为什么不使用媒体查询？ - user1721135

@user1721135 它们不容易维护，我希望有一个更灵活的解决方案。 - andrei

@user1721135 嗯，那可能会行，但是如果你每次修改面板数量都必须更改条件语句，是吧？ - andrei

似乎仅使用CSS无法完成此操作。您可以做的唯一事情是捕获“调整大小”和“方向更改”事件，并在触发时更新宽度，以改善用户体验。例如，flipboard.com使用此系统（请查看其网站）。 - JuSchz

我制作了一个响应式的轮播，使用了300%+的包装器 - http://codepen.io/seanjacob/pen/CBngk - seanjacob

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个窗格，因此将body的宽度设置为300％，并将窗格的宽度设置为33.3％。如果您添加另一个窗格，则body的宽度将为400％，而窗格的宽度将为25％，依此类推。

- user1721135