基本 jQuery Slider (bjqs) 响应问题答案

【问题标题】：Basic jQuery Slider (bjqs) responsiveness issues基本 jQuery Slider (bjqs) 响应问题
【发布时间】：2023-03-03 06:35:26
【问题描述】：

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

这是我正在实现的滑块的网址：http://test.hetzelcreative.com/hybrid/

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

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

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

【问题讨论】：

在最新版本的 Chrome (v25) Win 7 上似乎没问题
一直向下调整浏览器大小，然后进行刷新。你应该看到比例问题，然后如果你调整大小，你会看到事情开始变得更加混乱。
@Trevan 我按照你的建议做了，但我仍然没有看到你在 Chrome 中遇到的问题。主要是测试版，因为让它跨浏览器工作总是一个问题，并且需要时间来解决错误。

标签： jquery css slider

【解决方案1】：

对于那些寻找解决方案的人，这里是：

采取上面的方案解决宽度问题

对于高度问题，只需应用一个存在于高度和宽度之间的 x 因子

示例：如果您的滑块图像比长度大两倍，则应用此：

$(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        width: $("#banner-slide").width(),
        height: $("#banner-slide").width() /2,
        responsive: true,
        randomstart: true
    });
});

【讨论】：

【解决方案2】：

要解决宽度问题，你可以在初始化中获取容器 div 的宽度：

$(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        height: 445,
        width: $("#banner-slide").width(),
        responsive: true,
        randomstart: true
    });
});

【讨论】：

【解决方案3】：

我遇到了类似的问题（关于调整浏览器窗口的大小）-但最后我已经修复了它（或者破解，你的名字）：

当你初始化插件时，你可以定义滑块的尺寸（例如width） - 你应该放最大可能的值，因为它将是单个滑块的最大尺寸在您的页面上（遗憾的是官方文档没有这样描述） - 所以它应该是您的（设备）屏幕尺寸：

width: window.screen.width,

别忘了让它响应：

responsive: true,

在滑块初始化之后（它可以放在文档的末尾）你应该触发resize事件来调整你的滑块到当前浏览器的大小（因为如果窗口不会被最大化，滑块将大于并且 100% 不可见）：

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

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

PS。如果您正在使用滑块分页项目符号并且您希望它们保持水平居中您应该在触发调整大小事件之前添加此代码：

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

【讨论】：

【解决方案4】：

我遇到的问题是，除了在较小的屏幕上（如智能手机）上的初始加载外，我的所有内容都可以响应式地工作。当我缩小屏幕时，您可以在浏览器中看到问题。不过，当我调整窗口大小时，它会被修复。它只是在初始负载上不起作用。

我找到了一个对我有用的修复程序。我抓住了 bjqs-1.3.js 的未缩小版本并快速添加。第 175 行的开头是这样的：

var conf_responsive = function() {

然后在该函数中有一个if 语句说：

if(settings.animtype === 'slide'){

我在 if 声明中添加了一些内容，因为我的动画类型是“幻灯片”。如果您使用淡入淡出，您可能需要对 if(settings.animtype === 'fade'){ 条件执行类似的操作。

但无论如何，如果有条件，在$(window).resize(function() {}) 下方，我这样称呼它：

$(document).ready(
function() {
$(window).trigger('resize'); 
 }
);

这似乎解决了我遇到的问题。不确定这与此处发布的问题完全相同，但它可能会帮助寻找相关问题的解决方案的人。

【讨论】：

【解决方案5】：

我在几个不同的浏览器中进行了尝试。我会说它在响应能力方面有不止一两个小错误。

您是否考虑过寻找一个从一开始就为响应而设计的问题，而不是尝试解决 bjqs 的所有问题？

SequenceJS，看起来很活跃，有很多github关注
FlexSlider，也有大量 github 关注，但问题列表看起来有点长，具体取决于您所针对的浏览器/等等

【讨论】：

【解决方案6】：

由于时间限制，我没有深入研究脚本。但是，我要做的是确保脚本位于具有设定宽度和高度的包装器中。然后将脚本设置为 100% 宽度和 100% 高度。

【讨论】：

问题是，宽度是主体的 100%，所以这不起作用

【解决方案7】：

我建议设置滑块类的宽度以匹配插件的最大宽度。

即在这种情况下，你有 100%，它应该是 854px。

然后将overflow:hidden; 添加到滑块类中，这样就不会得到您所说的堆栈效果。

【讨论】：

但是我希望上一张和下一张图像也可见。添加溢出：隐藏使上一个和下一个图像不可见。