jquery - 基本 jQuery Slider (bjqs) 响应问题

Question

我正在使用这个 Basic jQuery Slider (bjqs) 并试图让它响应地工作。他们的变更日志说它的响应能力处于“测试版”，所以我猜这就是它有点古怪的原因。

这是我正在实现的 slider 的 url:http://test.hetzelcreative.com/hybrid/

基本上有两个问题，它们都与以小屏幕尺寸(手机宽度)加载页面有关:

1. 图片未按比例加载且未 100% 适合
2. 当您调整浏览器的大小时，定位会变得一团糟，它甚至会开始复制图像并将它们垂直堆叠。页面刷新可以解决这个问题，但这当然是 Not Acceptable

此外，在 bjqs-1.3.min.js 中，我将宽度设置为 854px，将高度设置为 481px。它最初设置为 400x300 或其他。我想知道这是否是我问题的根源。如果我删除那些 w & h 属性，尽管整个事情都不起作用。

Answer 1

我遇到了类似的问题(关于调整浏览器窗口的大小)- 但最后我已经修复了它(或者 hack，随便你怎么说):

当您初始化插件时，您可以定义 slider 的尺寸(例如 宽度)- 您应该在那里放置最大可能的值，因为它将是最大值 您页面上单张幻灯片的大小(遗憾的是官方文档没有这样描述)- 所以它应该是您的(设备)屏幕大小:

width: window.screen.width,

并且不要忘记让它响应:

responsive: true,

并且在 slider 初始化之后(它可以放在文档的末尾)你应该触发 resize 事件来调整你的 slider 到当前浏览器大小(因为如果窗口不会最大化 slider 将比它大并且在 100% 时不可见):

$(window).trigger('resize');

它对我适用于最新的 firefox 和 chrome - 未在 IE 和其他东西上测试。

附言。如果您正在使用 slider 分页元素符号并且希望它们水平居中，则应在触发调整大小事件之前添加此代码:

$(window).resize(function(){
  $('yourSliderId .bjqs-markers.h-centered').css({'left':0});
});