所以我在网站上有一个幻灯片,我想在窗口大小移动时转向一个列表。我在想是否有办法禁用jquery插件或窗口调整大小的功能来禁用滑动并为幻灯片列表创建移动样式。
您认为最好的方法是什么?
谢谢!
答案 0 :(得分:1)
使用带有teardown()
或destroy()
方法的幻灯片,该方法可以删除它创建的任何元素和事件侦听器。
任何使用jQuery UI小部件工厂的jQuery插件都会有这个,但遗憾的是很多其他人没有。您可以尝试这个轮播https://github.com/richardscarrott/jquery-ui-carousel,只需确保包含jQuery小部件工厂:http://jqueryui.com/widget/
其次,不要试图嗅探设备是否移动,不要在设备方面思考。如果用户想要在手机上查看旋转木马怎么办?如果他们的设备被错误地解释为移动设备怎么办?做出假设可能会回来咬你。检测功能和属性更安全,应该更加适合未来。
考虑一下您要解决的问题,如果是“如果在小视口上显示为列表,则此幻灯片显示会更好”,然后继续检查窗口的大小或使用{{1测试媒体查询在实例化插件之前(为什么所有工作只是为了再次撤消它),如果视口调整大小或设备方向发生变化,则再次进行。
在普通JS(以及相对最新的浏览器)中可能类似于:
matchMedia()
答案 1 :(得分:0)
在调用插件之前检查窗口大小。例如:
height = $(window).height();
width = $(window).width();
if(height > 300 || width > 200) {
// Initialize plugin
}
或者,如果你想启动它,然后在窗口太小时停止它(假设插件有办法自行禁用):
$(window).resize(function() {
height = $(window).height();
width = $(window).width();
if(height < 300 || width < 200) {
// Stop plugin
}
});
答案 2 :(得分:-1)
检查请求是否来自$ _SERVER ['HTTP_USER_AGENT']并检查user_agent是否为移动浏览器或使用插件执行此部分。
http://detectmobilebrowsers.com/
如果请求来自移动设备,那么。重定向到您的移动页面。