构建可调整大小的jQuery Mobile轮播

时间:2012-11-10 10:06:51

标签: javascript jquery html css jquery-mobile

我正在尝试多天寻找小问题的解决方案:

我看到许多轮播图片滑块带有导航按钮,因此您可以动态初始化图像数量并构建滑块,以便您可以使用NEXT和PREV按钮进行导航,但所有这些都无法调整大小。 例如:http://www.bxslider.com/examples/display-move-multiple-slides-once-example-one

我的问题是,我想使用jQuery Mobile并在mobile上显示,其中每个手机的分辨率都在变化。测试它是否适合的最佳选择是调整浏览器窗口的大小并检查滑块是否显示。在上面的例子中,它不可调整大小。

我如何使用3个图像构建类似的东西,1个在中间,2个在连接器中,文本在它们下面,并使用导航按钮将图像滚动1个图像和重要的图像,以便可以调整大小。

找到类似的手机示例:http://m.husqvarnacp.com/us/但不可读。

感谢您的帮助......

2 个答案:

答案 0 :(得分:1)

如果您想根据浏览器窗口调整大小来缩放页面,那么您应该看看这种技术。 How to implement a web page that scales when the browser window is resized?

如果问题只是图像大小不同,那么您可以修复图像的高度并让宽度发生变化,这样滑块就不会影响页面的布局。 另请考虑此图库滑块插件Step Carousel plugin

答案 1 :(得分:0)

我设法使用flexslider实现了这一点:http://www.woothemes.com/flexslider/

设置非常简单,正如您在演示中所看到的那样(http://flexslider.woothemes.com/),它是响应式的。

它也适用于触摸事件,因此非常适合移动设备。