我正在为移动设备制作一个滑动图库的代码片段。
您可以在这里查看它: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。