简体   繁体   English

jQuery / Bootstrap轮播容器响应

[英]jQuery / Bootstrap carousel container responsive

I have created a quick wireframe and to help illustrate what it is I would like to accomplish either with twitter bootstrap on its own or with a jQuery plugin. 我创建了一个快速线框图,以帮助说明它是我自己想通过Twitter引导程序还是使用jQuery插件完成的任务。 If there is any way to also build it with pure html5 and css3 that would be cool. 如果有任何方法也可以使用纯html5和css3进行构建,那就太酷了。 在此处输入图片说明

The thumbnails can be scrolled horizontally and snap in to place so that the left thumbnail is always in full view. 缩略图可以水平滚动并卡入到位,以便始终以全视图查看左侧的缩略图。 The user can then click a thumbnail to reveal its carousel content. 然后,用户可以单击缩略图以显示其轮播内容。

There will be 2 break points for mobile and tablet. 手机和平板电脑将有2个断点。 Each breakpoint will change the width of the container div that house the thumbmnails. 每个断点将更改容纳缩略图的容器div的宽度。 This means that on smaller devices there will be more horizontal scrolling. 这意味着在较小的设备上将有更多的水平滚动。 Scrolling on tablet and smart phone will be by touch. 通过触摸滚动平板电脑和智能手机。

The carousel can also be touch swiped. 轮播也可以触摸滑动。

If someone could please point me in the right direction that would be fantastic. 如果有人可以向我指出正确的方向,那将是很棒的。

Easiest place to start is probably http://www.pixedelic.com/plugins/camera/ . 最简单的起点可能是http://www.pixedelic.com/plugins/camera/ I have used it quite regularly and in particular it is fully responsive so will remove the need for specific break points. 我已经非常定期地使用它,尤其是它具有充分的响应能力,因此将不再需要特定的断点。 I've also found that it is quite easy to play around with the code should you want to customize it more than normal or shrink it down in size a bit, Hope that helps, Dan 我还发现,如果您想比正常情况更自定义代码或缩小其尺寸,可以很轻松地使用代码,希望能有所帮助,Dan

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM