javascript - 用于响应式 2 元素 slider 的 HTML/CSS(/JS?)

标签 javascript html css slider responsive-design

我想创建一个水平滚动的 slider ,其中两个元素在任何给定时间都在视口(viewport)中可见。视口(viewport)是一个容器 div,其宽度由媒体查询控制,因此它是完全响应的。如果视口(viewport)变得足够小(移动),我希望将 2 个可见元素堆叠起来。这是我正在努力完成的视觉效果:http://i.imgur.com/SQJ9Hv0.png

我遇到的最大问题是因为我想一次显示 2 个元素。容器 div 是响应式的,但它里面的 ul 更宽。所以我不能将元素的宽度设置为 50%,因为它将占整个 ul 的 50%。

我可以只用 CSS 完成样式设置吗,还是我必须使用一些 javascript 来管理这些东西的宽度?任何帮助是极大的赞赏!

最佳答案

试试 Twitter Bootstrap,它有一个特定的响应式 CSS 布局,可以为您做这种事情。我不使用它创建整个站点,但它的功能非常好,请查看: http://twitter.github.io/bootstrap/

关于javascript - 用于响应式 2 元素 slider 的 HTML/CSS(/JS?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17367312/

相关文章:

javascript - 一页上有多个 Jquery 对话框

javascript - axios + 查询字符串与 jQuery,POST 数据被查询字符串破坏

javascript - 如何从 Google Glass 浏览器中的 DeviceOrientation 获取指南针方向?

css - 给窗口添加阴影

javascript - 陷入无限循环,循环内有多个 If 条件

javascript - Bootstrap Datepicker最大选择N天

html - CSS 背景图片 URL 路径

html - Div 元素在 float : right; 上变形

css - 您可以将 Angular 主题原色应用于 div 吗?

html - 如何避免内联元素中的换行符?