简体繁体 English

JS？）

[英]HTML/CSS(/JS?) for Responsive 2 Element Slider

原文 2013-06-28 14:39:26 1 2 javascript/ html/ css/ slider/ responsive-design

I'm looking to create a horizontally scrolling slider, where two elements are visible within the viewport at any given time. 我正在寻找创建一个水平滚动滑块，其中在任何给定时间在视口中都可以看到两个元素。 The viewport is a container div whose width is controlled by media queries, so it's fully responsive. 视口是一个容器div，其宽度由媒体查询控制，因此具有充分的响应能力。 If the viewport gets small enough (mobile), I'd like the 2 visible elements to stack. 如果视口足够小（可移动），则希望将2个可见元素堆叠在一起。 Here's a visual of what I'm trying to accomplish: http://i.imgur.com/SQJ9Hv0.png 这是我要完成的视觉效果： http : //i.imgur.com/SQJ9Hv0.png

The biggest issue I'm running into is because I want to show 2 element as once. 我遇到的最大问题是因为我想一次显示2个元素。 The container div is responsive, but the ul inside of it is much wider. 容器div是响应型的，但其中的ul宽得多。 So I can't set the width of the elements to 50%, because it will be 50% of the whole ul. 所以我不能将元素的宽度设置为50％，因为它将是整个ul的50％。

Can I accomplish the styling for this with just CSS, or will I have to use some javascript to manage the width of these things too? 我可以仅使用CSS来完成样式设置，还是必须使用一些JavaScript来管理这些东西的宽度？ Any help is greatly appreciated! 任何帮助是极大的赞赏！

2 个解决方案

Try Twitter Bootstrap, it has a specific responsive CSS layout that will do this kind of thing for you. 尝试Twitter Bootstrap，它具有特定的响应式CSS布局，可以为您完成这种事情。 I don't use it create entire sites, but it's features are pretty good, check it out: http://twitter.github.io/bootstrap/ 我不使用它创建整个站点，但是它的功能非常好，请查看： http : //twitter.github.io/bootstrap/

No, please don't use JavaScripts to handle that. 不，请不要使用JavaScript来处理。 You can use Twitter Bootstrap's fluidGridSystem to support a responsive style. 您可以使用Twitter Bootstrap的fluidGridSystem支持响应式样式。 You also can share code at http://jsfiddle.net/ so that people can help you more easily. 您还可以在http://jsfiddle.net/上共享代码，以便人们可以更轻松地为您提供帮助。